feat: 重構主佈局及相關元件,更新命名規則並新增功能
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<v-app v-bind="$attrs" class="sk-admin-layout">
|
||||
<v-app v-bind="$attrs" class="main-layout">
|
||||
<v-navigation-drawer
|
||||
v-model="drawer"
|
||||
class="sk-admin-drawer"
|
||||
@@ -88,7 +88,7 @@
|
||||
|
||||
<!-- 桌面板選單 -->
|
||||
<template v-if="!isMobile">
|
||||
<SkAdminDrawerDesktopMenu
|
||||
<DrawerDesktopMenu
|
||||
v-model:opened="opened"
|
||||
:is-shrink="isRail"
|
||||
:menu-items="menuItems"
|
||||
@@ -99,12 +99,12 @@
|
||||
|
||||
<!-- 行動版選單 -->
|
||||
<template v-if="isMobile">
|
||||
<SkAdminDrawerMobileFavoritesPanel
|
||||
<DrawerMobileFavoritesPanel
|
||||
v-if="features.showFavorites && mobileFavoritesPanel"
|
||||
:favorite-items="favoriteItems"
|
||||
@select="onSelectFavorite"
|
||||
/>
|
||||
<SkAdminDrawerMobileMenuPanel
|
||||
<DrawerMobileMenuPanel
|
||||
v-else
|
||||
:mobile-current-items="mobileCurrentItems"
|
||||
@item-click="onMobileMenuClick"
|
||||
@@ -114,7 +114,7 @@
|
||||
|
||||
<v-app-bar ref="appBarRef" class="" height="auto">
|
||||
<v-row class="flex-column" no-gutters>
|
||||
<SkAdminAppBarTopCol
|
||||
<AppBarTopCol
|
||||
:features="features"
|
||||
:is-mobile="isMobile"
|
||||
:logout-label="logoutLabel"
|
||||
@@ -134,9 +134,9 @@
|
||||
<template v-if="$slots.actions" #actions>
|
||||
<slot name="actions"></slot>
|
||||
</template>
|
||||
</SkAdminAppBarTopCol>
|
||||
</AppBarTopCol>
|
||||
|
||||
<SkAdminAppBarFavoritesCol
|
||||
<AppBarFavoritesCol
|
||||
:favorite-items="favoriteItems"
|
||||
:favorites-config="favoritesConfig"
|
||||
:features="features"
|
||||
@@ -148,7 +148,7 @@
|
||||
@toggle-favorites-bar="toggleFavoritesBar"
|
||||
/>
|
||||
|
||||
<SkAdminAppBarBreadcrumbCol
|
||||
<AppBarBreadcrumbCol
|
||||
:breadcrumb-items="breadcrumbItems"
|
||||
:features="features"
|
||||
:is-mobile="isMobile"
|
||||
@@ -159,7 +159,7 @@
|
||||
<template v-if="$slots['breadcrumb-actions']" #breadcrumb-actions>
|
||||
<slot name="breadcrumb-actions"></slot>
|
||||
</template>
|
||||
</SkAdminAppBarBreadcrumbCol>
|
||||
</AppBarBreadcrumbCol>
|
||||
</v-row>
|
||||
</v-app-bar>
|
||||
|
||||
@@ -219,18 +219,18 @@ import type {
|
||||
AdminLayoutToolbarActions,
|
||||
AdminLayoutToolbarCounts,
|
||||
AdminLayoutUserProfile,
|
||||
} from './sk-admin-layout/types'
|
||||
} from './main-layout/types'
|
||||
import { mdiClose, mdiHelpCircleOutline, mdiHome, mdiMenu, mdiMenuOpen } from '@mdi/js'
|
||||
import { computed, ref, toRef } from 'vue'
|
||||
import { useDisplay } from 'vuetify'
|
||||
import { useAdminLayoutState } from '@/composables/layout/useAdminLayoutState'
|
||||
import { useThemeToggle } from '@/composables/layout/useThemeToggle'
|
||||
import SkAdminAppBarBreadcrumbCol from './sk-admin-layout/SkAdminAppBarBreadcrumbCol.vue'
|
||||
import SkAdminAppBarFavoritesCol from './sk-admin-layout/SkAdminAppBarFavoritesCol.vue'
|
||||
import SkAdminAppBarTopCol from './sk-admin-layout/SkAdminAppBarTopCol.vue'
|
||||
import SkAdminDrawerDesktopMenu from './sk-admin-layout/SkAdminDrawerDesktopMenu.vue'
|
||||
import SkAdminDrawerMobileFavoritesPanel from './sk-admin-layout/SkAdminDrawerMobileFavoritesPanel.vue'
|
||||
import SkAdminDrawerMobileMenuPanel from './sk-admin-layout/SkAdminDrawerMobileMenuPanel.vue'
|
||||
import AppBarBreadcrumbCol from './main-layout/AppBarBreadcrumbCol.vue'
|
||||
import AppBarFavoritesCol from './main-layout/AppBarFavoritesCol.vue'
|
||||
import AppBarTopCol from './main-layout/AppBarTopCol.vue'
|
||||
import DrawerDesktopMenu from './main-layout/DrawerDesktopMenu.vue'
|
||||
import DrawerMobileFavoritesPanel from './main-layout/DrawerMobileFavoritesPanel.vue'
|
||||
import DrawerMobileMenuPanel from './main-layout/DrawerMobileMenuPanel.vue'
|
||||
|
||||
const emit = defineEmits<{
|
||||
logout: []
|
||||
@@ -457,7 +457,7 @@ function getMobileMenuBtnColor(level: number) {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.sk-admin-layout {
|
||||
.main-layout {
|
||||
background: rgb(var(--v-theme-background));
|
||||
}
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import type { AdminLayoutMenuItem } from '@/components/layouts/sk-admin-layout/types'
|
||||
import type { AdminLayoutMenuItem } from '@/components/layouts/main-layout/types'
|
||||
import { computed, onBeforeUnmount, onMounted, ref, type Ref, watch } from 'vue'
|
||||
|
||||
type ToggleSidebarPayload = {
|
||||
|
||||
Reference in New Issue
Block a user