feat: 重構主佈局及相關元件,更新命名規則並新增功能

This commit is contained in:
skytek_xinliang
2026-03-30 15:14:12 +08:00
parent 79b20ded3b
commit d7ebbda3d3
10 changed files with 27 additions and 27 deletions
+17 -17
View File
@@ -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));
}