Refactor layout components for improved readability and consistency

src/components/layouts/SKAdminLayout.vue

@@ -1,15 +1,25 @@
 <template>
   <v-app v-bind="$attrs" class="sk-admin-layout">
     <v-navigation-drawer
-v-model="drawer" class="sk-admin-drawer" color="surface" :rail="isRail"
-      :rail-width="railWidth" :temporary="isMobile" :width="drawerWidth">
+      v-model="drawer"
+      class="sk-admin-drawer"
+      color="surface"
+      :rail="isRail"
+      :rail-width="railWidth"
+      :temporary="isMobile"
+      :width="drawerWidth"
+    >
       <template #prepend>
-
         <!-- Sidebar Title -->
         <v-card class="sidebar-header d-flex align-center pa-0 pl-3 py-2" flat>
           <v-btn
-:aria-label="sidebarToggleLabel" color="grey" :icon="isRail ? mdiMenuOpen : mdiMenu" size="32"
-            variant="text" @click="toggleSidebar" />
+            :aria-label="sidebarToggleLabel"
+            color="grey"
+            :icon="isRail ? mdiMenuOpen : mdiMenu"
+            size="32"
+            variant="text"
+            @click="toggleSidebar"
+          />
           <v-card-text v-if="!isRail" class="sidebar-title flex-grow-1 py-0">
             <slot name="title">
               <div class="text-subtitle-1 font-weight-bold text-on-surface">
@@ -24,7 +34,11 @@ v-model="drawer" class="sk-admin-drawer" color="surface" :rail="isRail"
         <v-divider />
 
         <!-- User Info -->
-        <v-card v-if="features.showUserInfo" class="user-info d-flex align-center pa-0 pl-3 py-2" flat>
+        <v-card
+          v-if="features.showUserInfo"
+          class="user-info d-flex align-center pa-0 pl-3 py-2"
+          flat
+        >
           <v-avatar class="user-avatar" color="primary" size="32" variant="tonal">
             <span class="text-subtitle-2 font-weight-bold">{{ userProfile.avatarText }}</span>
           </v-avatar>
@@ -39,17 +53,34 @@ v-model="drawer" class="sk-admin-drawer" color="surface" :rail="isRail"
         </v-card>
         <v-divider />
 
-        <v-sheet v-if="isMobile" class="mobile-menu-subheader d-flex flex-column align-stretch ga-2 px-3 py-2">
+        <v-sheet
+          v-if="isMobile"
+          class="mobile-menu-subheader d-flex flex-column align-stretch ga-2 px-3 py-2"
+        >
           <v-btn
-v-if="features.showFavorites" class="justify-start text-none"
-            color="primary" rounded="pill" size="small" :variant="mobileFavoritesPanel ? 'flat' : 'outlined'"
-            @click="openMobileFavoritesPanel">
-            <span class="text-on-secondary text-caption font-weight-medium">{{ favoritesConfig.label }}</span>
+            v-if="features.showFavorites"
+            class="justify-start text-none"
+            color="primary"
+            rounded="pill"
+            size="small"
+            :variant="mobileFavoritesPanel ? 'flat' : 'outlined'"
+            @click="openMobileFavoritesPanel"
+          >
+            <span class="text-on-secondary text-caption font-weight-medium">{{
+              favoritesConfig.label
+            }}</span>
           </v-btn>
           <v-btn
-v-for="step in mobileMenuLevels" :key="`mobile-level-${step.level}`"
-            block class="justify-start text-none" :color="getMobileMenuBtnColor(step.level)"
-            rounded="pill" size="small" :variant="getMobileMenuBtnVariant(step.level)" @click="goToMobileLevel(step.level)">
+            v-for="step in mobileMenuLevels"
+            :key="`mobile-level-${step.level}`"
+            block
+            class="justify-start text-none"
+            :color="getMobileMenuBtnColor(step.level)"
+            rounded="pill"
+            size="small"
+            :variant="getMobileMenuBtnVariant(step.level)"
+            @click="goToMobileLevel(step.level)"
+          >
             {{ step.title }}
           </v-btn>
         </v-sheet>
@@ -58,47 +89,76 @@ v-for="step in mobileMenuLevels" :key="`mobile-level-${step.level}`"
       <!-- 桌面板選單 -->
       <template v-if="!isMobile">
         <SkAdminDrawerDesktopMenu
-v-model:opened="opened" :is-shrink="isRail" :menu-items="menuItems"
-          @select="handleSelect" @unshrink="handleUnshrink" />
+          v-model:opened="opened"
+          :is-shrink="isRail"
+          :menu-items="menuItems"
+          @select="handleSelect"
+          @unshrink="handleUnshrink"
+        />
       </template>
 
       <!-- 行動版選單 -->
       <template v-if="isMobile">
         <SkAdminDrawerMobileFavoritesPanel
-v-if="features.showFavorites && mobileFavoritesPanel"
-          :favorite-items="favoriteItems" @select="onSelectFavorite" />
+          v-if="features.showFavorites && mobileFavoritesPanel"
+          :favorite-items="favoriteItems"
+          @select="onSelectFavorite"
+        />
         <SkAdminDrawerMobileMenuPanel
-v-else :mobile-current-items="mobileCurrentItems"
-          @item-click="onMobileMenuClick" />
+          v-else
+          :mobile-current-items="mobileCurrentItems"
+          @item-click="onMobileMenuClick"
+        />
       </template>
     </v-navigation-drawer>
 
     <v-app-bar ref="appBarRef" class="" height="auto">
       <v-row class="flex-column" no-gutters>
-
         <SkAdminAppBarTopCol
-:features="features" :is-mobile="isMobile" :logout-label="logoutLabel"
-          :search-config="searchConfig" :search-value="searchValue" :show-breadcrumb-bar="showBreadcrumbBar"
-          :show-favorites-bar="showFavoritesBar" :theme-toggle-label="themeToggleLabel" :toolbar-actions="toolbarActions"
-          :toolbar-counts="toolbarCounts" @action="handleAction"
-          @logout="emitLogout" @search="triggerSearch" @toggle-drawer="drawer = !drawer"
-          @toggle-theme="toggleTheme" @update:search-value="searchValue = $event" @update:show-breadcrumb-bar="showBreadcrumbBar = $event"
-          @update:show-favorites-bar="showFavoritesBar = $event">
+          :features="features"
+          :is-mobile="isMobile"
+          :logout-label="logoutLabel"
+          :search-config="searchConfig"
+          :search-value="searchValue"
+          :show-breadcrumb-bar="showBreadcrumbBar"
+          :show-favorites-bar="showFavoritesBar"
+          :theme-toggle-label="themeToggleLabel"
+          :toolbar-actions="toolbarActions"
+          :toolbar-counts="toolbarCounts"
+          @action="handleAction"
+          @logout="emitLogout"
+          @search="triggerSearch"
+          @toggle-drawer="drawer = !drawer"
+          @toggle-theme="toggleTheme"
+          @update:search-value="searchValue = $event"
+          @update:show-breadcrumb-bar="showBreadcrumbBar = $event"
+          @update:show-favorites-bar="showFavoritesBar = $event"
+        >
           <template v-if="$slots.actions" #actions>
             <slot name="actions"></slot>
           </template>
         </SkAdminAppBarTopCol>
 
         <SkAdminAppBarFavoritesCol
-:favorite-items="favoriteItems" :favorites-config="favoritesConfig" :features="features"
-          :is-mobile="isMobile" :show-favorites-bar="showFavoritesBar" @add-favorite="emitAddFavorite"
-          @remove-favorite="emitRemoveFavorite" @select="handleSelect"
-          @toggle-favorites-bar="toggleFavoritesBar" />
+          :favorite-items="favoriteItems"
+          :favorites-config="favoritesConfig"
+          :features="features"
+          :is-mobile="isMobile"
+          :show-favorites-bar="showFavoritesBar"
+          @add-favorite="emitAddFavorite"
+          @remove-favorite="emitRemoveFavorite"
+          @select="handleSelect"
+          @toggle-favorites-bar="toggleFavoritesBar"
+        />
 
         <SkAdminAppBarBreadcrumbCol
-:breadcrumb-items="breadcrumbItems" :features="features" :is-mobile="isMobile"
-          :show-breadcrumb-bar="showBreadcrumbBar" :show-favorites-bar="showFavoritesBar"
-          @toggle-favorites-bar="toggleFavoritesBar">
+          :breadcrumb-items="breadcrumbItems"
+          :features="features"
+          :is-mobile="isMobile"
+          :show-breadcrumb-bar="showBreadcrumbBar"
+          :show-favorites-bar="showFavoritesBar"
+          @toggle-favorites-bar="toggleFavoritesBar"
+        >
           <template v-if="$slots['breadcrumb-actions']" #breadcrumb-actions>
             <slot name="breadcrumb-actions"></slot>
           </template>
@@ -125,8 +185,12 @@ v-else :mobile-current-items="mobileCurrentItems"
           <v-card-title class="text-subtitle-2">操作說明</v-card-title>
           <template #append>
             <v-btn
-aria-label="關閉說明" :icon="mdiClose" size="small" variant="text"
-              @click="helpWidgetVisible = false" />
+              aria-label="關閉說明"
+              :icon="mdiClose"
+              size="small"
+              variant="text"
+              @click="helpWidgetVisible = false"
+            />
           </template>
         </v-card-item>
         <v-divider />
@@ -146,11 +210,6 @@ aria-label="關閉說明" :icon="mdiClose" size="small" variant="text"
 </template>
 
 <script setup lang="ts">
-import { mdiClose, mdiHelpCircleOutline, mdiHome, mdiMenu, mdiMenuOpen } from '@mdi/js'
-import { computed, ref } from 'vue'
-import { useAdminLayoutState } from '@/composables/layout/useAdminLayoutState'
-import { useDisplay } from 'vuetify'
-import { useThemeToggle } from '@/composables/layout/useThemeToggle'
 import type {
   AdminLayoutActionType,
   AdminLayoutBreadcrumbConfig,
@@ -164,6 +223,11 @@ import type {
   AdminLayoutToolbarCounts,
   AdminLayoutUserProfile,
 } from './sk-admin-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'
@@ -176,7 +240,7 @@ const emit = defineEmits<{
   select: [item: AdminLayoutMenuItem]
   search: [keyword: string]
   action: [type: AdminLayoutActionType]
-  'toggle-sidebar': [payload: { drawer: boolean, rail: boolean }]
+  'toggle-sidebar': [payload: { drawer: boolean; rail: boolean }]
   'toggle-theme': [themeName: string]
   'add-favorite': []
   'remove-favorite': [item: AdminLayoutMenuItem]
@@ -231,38 +295,36 @@ const props = withDefaults(defineProps<Props>(), {
   sidebarToggleLabel: '切換側欄',
   favoriteHeaderLabel: '我的最愛',
   favoriteItems: () => [],
-  menuItems: () => [
-      { title: '首頁', path: '/' },
-    ],
+  menuItems: () => [{ title: '首頁', path: '/' }],
   userProfile: () => ({
-      name: '王小明',
-      role: '資訊工程系 - 學生',
-      avatarText: '王',
-    }),
+    name: '王小明',
+    role: '資訊工程系 - 學生',
+    avatarText: '王',
+  }),
   searchConfig: () => ({
-      placeholder: '搜尋功能名稱... (試試「成績」、「選課」、「請假」)',
-      label: '搜尋',
-    }),
+    placeholder: '搜尋功能名稱... (試試「成績」、「選課」、「請假」)',
+    label: '搜尋',
+  }),
   toolbarActions: () => ({
-      notificationsLabel: '通知',
-      messagesLabel: '訊息',
-      helpLabel: '說明',
-      settingsLabel: '設定',
-    }),
+    notificationsLabel: '通知',
+    messagesLabel: '訊息',
+    helpLabel: '說明',
+    settingsLabel: '設定',
+  }),
   toolbarCounts: () => ({
-      notifications: 0,
-      messages: 0,
-    }),
+    notifications: 0,
+    messages: 0,
+  }),
   favoritesConfig: () => ({
-      label: '常用',
-      addLabel: '新增常用',
-      showAdd: false,
-    }),
+    label: '常用',
+    addLabel: '新增常用',
+    showAdd: false,
+  }),
   breadcrumbConfig: () => ({
-      homeLabel: '首頁',
-      homeDisabled: true,
-      homeIcon: mdiHome,
-    }),
+    homeLabel: '首頁',
+    homeDisabled: true,
+    homeIcon: mdiHome,
+  }),
   breadcrumbItems: () => [],
   favoritesBarVisible: null,
   breadcrumbBarVisible: null,
@@ -276,9 +338,9 @@ const props = withDefaults(defineProps<Props>(), {
     showUserInfo: true,
   }),
   drawerConfig: () => ({
-      width: 280,
-      railWidth: 56,
-    }),
+    width: 280,
+    railWidth: 56,
+  }),
 })
 
 // Feature toggle: UI 區塊顯示
@@ -339,12 +401,12 @@ const {
   emitUpdateIsRail: (value) => emit('update:isRail', value),
   favoritesBarVisible: props.favoritesBarVisible,
   isMobile,
-  isRail: props.isRail,
+  isRail: toRef(props, 'isRail'), // 傳 Ref 確保 composable getter 能隨 prop 更新
   menuItems: props.menuItems,
   onToggleSidebar: (payload) => emit('toggle-sidebar', payload),
 })
 
-function toggleTheme () {
+function toggleTheme() {
   const next = switchTheme()
   if (!next) return
   emit('toggle-theme', next)
@@ -352,7 +414,7 @@ function toggleTheme () {
 
 const emitLogout = () => emit('logout')
 
-function handleAction (type: AdminLayoutActionType) {
+function handleAction(type: AdminLayoutActionType) {
   if (type === 'help') {
     helpWidgetVisible.value = true
   }
@@ -360,41 +422,39 @@ function handleAction (type: AdminLayoutActionType) {
 }
 
 // 以按鈕或 Enter 觸發搜尋，避免每個字都觸發
-function triggerSearch () {
+function triggerSearch() {
   const keyword = searchValue.value
   emit('search', keyword)
   // 觸發後清空欄位，避免彈窗出現仍保留文字
   searchValue.value = ''
 }
 
-function emitAddFavorite () {
+function emitAddFavorite() {
   emit('add-favorite')
 }
 
-function emitRemoveFavorite (item: AdminLayoutMenuItem) {
+function emitRemoveFavorite(item: AdminLayoutMenuItem) {
   emit('remove-favorite', item)
 }
 
-function onSelectFavorite (item: AdminLayoutMenuItem) {
+function onSelectFavorite(item: AdminLayoutMenuItem) {
   handleSelectFavorite(item, handleSelect)
 }
 
-function onMobileMenuClick (item: AdminLayoutMenuItem) {
+function onMobileMenuClick(item: AdminLayoutMenuItem) {
   handleMobileMenuClick(item, handleSelect)
 }
 
-function handleSelect (item: AdminLayoutMenuItem) {
+function handleSelect(item: AdminLayoutMenuItem) {
   emit('select', item)
   if (isMobile.value) drawer.value = false
 }
 
-function getMobileMenuBtnVariant (level: number) {
-  return !mobileFavoritesPanel.value && level === mobileCurrentLevel.value
-    ? 'flat'
-    : 'outlined'
+function getMobileMenuBtnVariant(level: number) {
+  return !mobileFavoritesPanel.value && level === mobileCurrentLevel.value ? 'flat' : 'outlined'
 }
 
-function getMobileMenuBtnColor (level: number) {
+function getMobileMenuBtnColor(level: number) {
   return level === mobileCurrentLevel.value ? 'primary' : 'secondary'
 }
 </script>
@@ -433,8 +493,6 @@ function getMobileMenuBtnColor (level: number) {
   background: rgb(var(--v-theme-background));
 }
 
-
-
 .search-input-wrapper {
   flex: 1;
   display: flex;
@@ -515,7 +573,9 @@ function getMobileMenuBtnColor (level: number) {
 /* 確保 v-list-group 的 activator 也有 hover 效果 */
 :deep(.v-list-group > .v-list-item) {
   cursor: pointer;
-  transition: background-color 0.2s ease, color 0.2s ease;
+  transition:
+    background-color 0.2s ease,
+    color 0.2s ease;
 }
 
 :deep(.v-list-group > .v-list-item:hover) {
@@ -525,7 +585,9 @@ function getMobileMenuBtnColor (level: number) {
 
 /* 為所有 v-list-item 加上 transition */
 :deep(.v-list-item) {
-  transition: background-color 0.2s ease, color 0.2s ease;
+  transition:
+    background-color 0.2s ease,
+    color 0.2s ease;
 }
 
 /* 確保滾軸邊距 */