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

docs/frontend-layering.md

@@ -146,16 +146,16 @@
 
 - [MainLayout.vue](/home/carl/git/skt-vuetify-templates/src/components/layouts/MainLayout.vue)
 - [PlainLayout.vue](/home/carl/git/skt-vuetify-templates/src/components/layouts/PlainLayout.vue)
-- `src/components/layouts/sk-admin-layout/*`
+- `src/components/layouts/main-layout/*`
 
-其中 `sk-admin-layout/*` 是 `MainLayout` 底下拆出的骨架子元件：
+其中 `main-layout/*` 是 `MainLayout` 底下拆出的骨架子元件：
 
-- [SkAdminAppBarBreadcrumbCol.vue](/home/carl/git/skt-vuetify-templates/src/components/layouts/sk-admin-layout/SkAdminAppBarBreadcrumbCol.vue)
+- [AppBarBreadcrumbCol.vue](/home/carl/git/skt-vuetify-templates/src/components/layouts/main-layout/AppBarBreadcrumbCol.vue)
-- [SkAdminAppBarFavoritesCol.vue](/home/carl/git/skt-vuetify-templates/src/components/layouts/sk-admin-layout/SkAdminAppBarFavoritesCol.vue)
+- [AppBarFavoritesCol.vue](/home/carl/git/skt-vuetify-templates/src/components/layouts/main-layout/AppBarFavoritesCol.vue)
-- [SkAdminAppBarTopCol.vue](/home/carl/git/skt-vuetify-templates/src/components/layouts/sk-admin-layout/SkAdminAppBarTopCol.vue)
+- [AppBarTopCol.vue](/home/carl/git/skt-vuetify-templates/src/components/layouts/main-layout/AppBarTopCol.vue)
-- [SkAdminDrawerDesktopMenu.vue](/home/carl/git/skt-vuetify-templates/src/components/layouts/sk-admin-layout/SkAdminDrawerDesktopMenu.vue)
+- [DrawerDesktopMenu.vue](/home/carl/git/skt-vuetify-templates/src/components/layouts/main-layout/DrawerDesktopMenu.vue)
-- [SkAdminDrawerMobileFavoritesPanel.vue](/home/carl/git/skt-vuetify-templates/src/components/layouts/sk-admin-layout/SkAdminDrawerMobileFavoritesPanel.vue)
+- [DrawerMobileFavoritesPanel.vue](/home/carl/git/skt-vuetify-templates/src/components/layouts/main-layout/DrawerMobileFavoritesPanel.vue)
-- [SkAdminDrawerMobileMenuPanel.vue](/home/carl/git/skt-vuetify-templates/src/components/layouts/sk-admin-layout/SkAdminDrawerMobileMenuPanel.vue)
+- [DrawerMobileMenuPanel.vue](/home/carl/git/skt-vuetify-templates/src/components/layouts/main-layout/DrawerMobileMenuPanel.vue)
 
 layout 應只承擔：
 
@@ -333,7 +333,7 @@ layout 不應承擔：
 
 目前例子：
 
-- `sk-admin-layout`
+- `main-layout`
 - `master-detail`
 
 ### domain component 命名

src/components/layouts/MainLayout.vue

@@ -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 AppBarBreadcrumbCol from './main-layout/AppBarBreadcrumbCol.vue'
-import SkAdminAppBarFavoritesCol from './sk-admin-layout/SkAdminAppBarFavoritesCol.vue'
+import AppBarFavoritesCol from './main-layout/AppBarFavoritesCol.vue'
-import SkAdminAppBarTopCol from './sk-admin-layout/SkAdminAppBarTopCol.vue'
+import AppBarTopCol from './main-layout/AppBarTopCol.vue'
-import SkAdminDrawerDesktopMenu from './sk-admin-layout/SkAdminDrawerDesktopMenu.vue'
+import DrawerDesktopMenu from './main-layout/DrawerDesktopMenu.vue'
-import SkAdminDrawerMobileFavoritesPanel from './sk-admin-layout/SkAdminDrawerMobileFavoritesPanel.vue'
+import DrawerMobileFavoritesPanel from './main-layout/DrawerMobileFavoritesPanel.vue'
-import SkAdminDrawerMobileMenuPanel from './sk-admin-layout/SkAdminDrawerMobileMenuPanel.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));
 }
 

src/composables/layout/useAdminLayoutState.ts

@@ -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 = {