refactor: replace common confirm dialogs with maintenance CRUD dialogs and streamline form handling in MasterDetailMntC.vue and SingleRecordMnt.vue

src/components/layouts/SKAdminLayout.vue

@@ -66,10 +66,10 @@ v-model:opened="opened" :is-shrink="isRail" :menu-items="menuItems"
       <template v-if="isMobile">
         <SkAdminDrawerMobileFavoritesPanel
 v-if="features.showFavorites && mobileFavoritesPanel"
-          :favorite-items="favoriteItems" @select="handleSelectFavorite" />
+          :favorite-items="favoriteItems" @select="onSelectFavorite" />
         <SkAdminDrawerMobileMenuPanel
 v-else :mobile-current-items="mobileCurrentItems"
-          @item-click="handleMobileMenuClick" />
+          @item-click="onMobileMenuClick" />
       </template>
     </v-navigation-drawer>
 
@@ -145,11 +145,25 @@ aria-label="關閉說明" :icon="mdiClose" size="small" variant="text"
   </v-app>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { mdiClose, mdiHelpCircleOutline, mdiHome, mdiMenu, mdiMenuOpen } from '@mdi/js'
-import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
-import { useDisplay, useTheme } from 'vuetify'
-import { getNextThemeName } from '@/utils/theme'
+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,
+  AdminLayoutBreadcrumbItem,
+  AdminLayoutDrawerConfig,
+  AdminLayoutFavoritesConfig,
+  AdminLayoutFeatures,
+  AdminLayoutMenuItem,
+  AdminLayoutSearchConfig,
+  AdminLayoutToolbarActions,
+  AdminLayoutToolbarCounts,
+  AdminLayoutUserProfile,
+} from './sk-admin-layout/types'
 import SkAdminAppBarBreadcrumbCol from './sk-admin-layout/SkAdminAppBarBreadcrumbCol.vue'
 import SkAdminAppBarFavoritesCol from './sk-admin-layout/SkAdminAppBarFavoritesCol.vue'
 import SkAdminAppBarTopCol from './sk-admin-layout/SkAdminAppBarTopCol.vue'
@@ -157,21 +171,21 @@ import SkAdminDrawerDesktopMenu from './sk-admin-layout/SkAdminDrawerDesktopMenu
 import SkAdminDrawerMobileFavoritesPanel from './sk-admin-layout/SkAdminDrawerMobileFavoritesPanel.vue'
 import SkAdminDrawerMobileMenuPanel from './sk-admin-layout/SkAdminDrawerMobileMenuPanel.vue'
 
-const emit = defineEmits([
-  'logout',
-  'select',
-  'search',
-  'action',
-  'toggle-sidebar',
-  'toggle-theme',
-  'add-favorite',
-  'remove-favorite',
-  'update:isRail',
-  'update:favoritesBarVisible',
-  'update:breadcrumbBarVisible',
-])
+const emit = defineEmits<{
+  logout: []
+  select: [item: AdminLayoutMenuItem]
+  search: [keyword: string]
+  action: [type: AdminLayoutActionType]
+  'toggle-sidebar': [payload: { drawer: boolean, rail: boolean }]
+  'toggle-theme': [themeName: string]
+  'add-favorite': []
+  'remove-favorite': [item: AdminLayoutMenuItem]
+  'update:isRail': [value: boolean]
+  'update:favoritesBarVisible': [value: boolean]
+  'update:breadcrumbBarVisible': [value: boolean]
+}>()
 
-const defaultFeatures = {
+const defaultFeatures: AdminLayoutFeatures = {
   showThemeToggle: false,
   showFavorites: true,
   showBreadcrumb: true,
@@ -180,111 +194,91 @@ const defaultFeatures = {
   showUserInfo: true,
 }
 
-const defaultBreadcrumbConfig = {
+const defaultBreadcrumbConfig: AdminLayoutBreadcrumbConfig = {
   homeLabel: '首頁',
   homeDisabled: true,
   homeIcon: mdiHome,
 }
 
-const props = defineProps({
-  systemTitle: { type: String, default: '管理系統' },
-  systemSubtitle: { type: String, default: 'Campus System' },
-  themeToggleLabel: { type: String, default: '切換主題' },
-  logoutLabel: { type: String, default: '登出' },
-  sidebarToggleLabel: { type: String, default: '切換側欄' },
-  favoriteHeaderLabel: { type: String, default: '我的最愛' },
-  favoriteItems: {
-    type: Array,
-    default: () => [],
-  },
-  menuItems: {
-    type: Array,
-    default: () => [
+interface Props {
+  systemTitle?: string
+  systemSubtitle?: string
+  themeToggleLabel?: string
+  logoutLabel?: string
+  sidebarToggleLabel?: string
+  favoriteHeaderLabel?: string
+  favoriteItems?: AdminLayoutMenuItem[]
+  menuItems?: AdminLayoutMenuItem[]
+  userProfile?: AdminLayoutUserProfile
+  searchConfig?: AdminLayoutSearchConfig
+  toolbarActions?: AdminLayoutToolbarActions
+  toolbarCounts?: AdminLayoutToolbarCounts
+  favoritesConfig?: AdminLayoutFavoritesConfig
+  breadcrumbConfig?: AdminLayoutBreadcrumbConfig
+  breadcrumbItems?: AdminLayoutBreadcrumbItem[]
+  favoritesBarVisible?: boolean | null
+  breadcrumbBarVisible?: boolean | null
+  isRail?: boolean | null
+  features?: Partial<AdminLayoutFeatures>
+  drawerConfig?: AdminLayoutDrawerConfig
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  systemTitle: '管理系統',
+  systemSubtitle: 'Campus System',
+  themeToggleLabel: '切換主題',
+  logoutLabel: '登出',
+  sidebarToggleLabel: '切換側欄',
+  favoriteHeaderLabel: '我的最愛',
+  favoriteItems: () => [],
+  menuItems: () => [
       { title: '首頁', path: '/' },
     ],
-  },
-  userProfile: {
-    type: Object,
-    default: () => ({
+  userProfile: () => ({
       name: '王小明',
       role: '資訊工程系 - 學生',
       avatarText: '王',
     }),
-  },
-  searchConfig: {
-    type: Object,
-    default: () => ({
+  searchConfig: () => ({
       placeholder: '搜尋功能名稱... (試試「成績」、「選課」、「請假」)',
       label: '搜尋',
     }),
-  },
-  toolbarActions: {
-    type: Object,
-    default: () => ({
+  toolbarActions: () => ({
       notificationsLabel: '通知',
       messagesLabel: '訊息',
       helpLabel: '說明',
       settingsLabel: '設定',
     }),
-  },
-  toolbarCounts: {
-    type: Object,
-    default: () => ({
+  toolbarCounts: () => ({
       notifications: 0,
       messages: 0,
     }),
-  },
-  favoritesConfig: {
-    type: Object,
-    default: () => ({
+  favoritesConfig: () => ({
       label: '常用',
       addLabel: '新增常用',
       showAdd: false,
     }),
-  },
-  breadcrumbConfig: {
-    type: Object,
-    default: () => ({
+  breadcrumbConfig: () => ({
       homeLabel: '首頁',
       homeDisabled: true,
       homeIcon: mdiHome,
     }),
-  },
-  breadcrumbItems: {
-    type: Array,
-    default: () => [],
-  },
-  favoritesBarVisible: {
-    type: [Boolean, null],
-    default: null,
-  },
-  breadcrumbBarVisible: {
-    type: [Boolean, null],
-    default: null,
-  },
-  isRail: {
-    type: [Boolean, null],
-    default: null,
-  },
-  features: {
-    type: Object,
-    default: () => ({
-      showThemeToggle: false,
-      showFavorites: true,
-      showBreadcrumb: true,
-      showSearch: true,
-      showToolbarActions: true,
-      showUserInfo: true,
-      showMenuHeader: false,
-    }),
-  },
-  drawerConfig: {
-    type: Object,
-    default: () => ({
+  breadcrumbItems: () => [],
+  favoritesBarVisible: null,
+  breadcrumbBarVisible: null,
+  isRail: null,
+  features: () => ({
+    showThemeToggle: false,
+    showFavorites: true,
+    showBreadcrumb: true,
+    showSearch: true,
+    showToolbarActions: true,
+    showUserInfo: true,
+  }),
+  drawerConfig: () => ({
       width: 280,
       railWidth: 56,
     }),
-  },
 })
 
 // Feature toggle: UI 區塊顯示
@@ -296,39 +290,16 @@ const branding = computed(() => ({
   subtitle: props.systemSubtitle,
 }))
 
-// feature toggles & layout
 const display = useDisplay()
 const isMobile = computed(() => display.mdAndDown.value)
-const drawer = ref(true)
-const mobileFavoritesPanel = ref(false)
-const localIsRail = ref(false)
-const isRail = computed({
-  get: () => (props.isRail ?? localIsRail.value),
-  set: (value) => {
-    if (props.isRail === null) {
-      localIsRail.value = value
-      return
-    }
-    emit('update:isRail', value)
-  },
-})
-const opened = ref([])
-const appBarRef = ref(null)
-const appBarHeight = ref(0)
+const appBarRef = ref<HTMLElement | null>(null)
 const helpWidgetVisible = ref(false)
 const drawerWidth = computed(() => props.drawerConfig?.width)
 const railWidth = computed(() => props.drawerConfig?.railWidth)
 
-// i18n computed text
 const searchValue = ref('')
+const { toggleTheme: switchTheme } = useThemeToggle()
 
-// links/settings refs
-const theme = useTheme()
-const availableThemeNames = computed(() =>
-  Object.keys(theme.themes.value ?? {}).filter((name) => name.startsWith('theme'))
-)
-
-// composed computed objects
 const breadcrumbConfig = computed(() => ({ ...defaultBreadcrumbConfig, ...props.breadcrumbConfig }))
 
 const breadcrumbItems = computed(() => {
@@ -342,31 +313,46 @@ const breadcrumbItems = computed(() => {
   ]
 })
 
-// event handlers / API
+const {
+  drawer,
+  goToMobileLevel,
+  handleMobileMenuClick,
+  handleSelectFavorite,
+  handleUnshrink,
+  isRail,
+  mainStyle,
+  mobileCurrentItems,
+  mobileCurrentLevel,
+  mobileFavoritesPanel,
+  mobileMenuLevels,
+  openMobileFavoritesPanel,
+  opened,
+  showBreadcrumbBar,
+  showFavoritesBar,
+  toggleFavoritesBar,
+  toggleSidebar,
+} = useAdminLayoutState({
+  appBarRef,
+  breadcrumbBarVisible: props.breadcrumbBarVisible,
+  emitUpdateBreadcrumbBarVisible: (value) => emit('update:breadcrumbBarVisible', value),
+  emitUpdateFavoritesBarVisible: (value) => emit('update:favoritesBarVisible', value),
+  emitUpdateIsRail: (value) => emit('update:isRail', value),
+  favoritesBarVisible: props.favoritesBarVisible,
+  isMobile,
+  isRail: props.isRail,
+  menuItems: props.menuItems,
+  onToggleSidebar: (payload) => emit('toggle-sidebar', payload),
+})
+
 function toggleTheme () {
-  const names = availableThemeNames.value
-  if (names.length === 0) return
-
-  const current = theme.global.name.value
-  const next = getNextThemeName(names, current)
+  const next = switchTheme()
   if (!next) return
-  theme.change(next)
   emit('toggle-theme', next)
 }
 
-function toggleSidebar () {
-  if (isMobile.value) {
-    drawer.value = !drawer.value
-  } else {
-    isRail.value = !isRail.value
-  }
-  emit('toggle-sidebar', { drawer: drawer.value, rail: isRail.value })
-}
-
 const emitLogout = () => emit('logout')
 
-// 將工具列按鈕行為轉成統一的 action 事件，交由外層應用處理
-function handleAction (type) {
+function handleAction (type: AdminLayoutActionType) {
   if (type === 'help') {
     helpWidgetVisible.value = true
   }
@@ -385,143 +371,30 @@ function emitAddFavorite () {
   emit('add-favorite')
 }
 
-function emitRemoveFavorite (item) {
+function emitRemoveFavorite (item: AdminLayoutMenuItem) {
   emit('remove-favorite', item)
 }
 
-function handleSelectFavorite (item) {
-  handleSelect(item)
-  mobileFavoritesPanel.value = false
+function onSelectFavorite (item: AdminLayoutMenuItem) {
+  handleSelectFavorite(item, handleSelect)
 }
 
-const mobileMenuPath = ref([])
-const mobileCurrentItems = computed(() =>
-  mobileMenuPath.value.reduce((items, currentItem) => currentItem?.subItems ?? [], props.menuItems || [])
-)
-const mobileCurrentLevel = computed(() => mobileMenuPath.value.length + 1)
-const mobileMenuLevels = computed(() =>
-  Array.from({ length: mobileCurrentLevel.value }, (_, index) => ({
-    level: index + 1,
-    title: index === 0 ? '主選單' : (mobileMenuPath.value[index - 1]?.title ?? `第${index + 1}層`),
-  }))
-)
-
-function goToMobileLevel (level) {
-  mobileFavoritesPanel.value = false
-  mobileMenuPath.value = mobileMenuPath.value.slice(0, Math.max(0, level - 1))
+function onMobileMenuClick (item: AdminLayoutMenuItem) {
+  handleMobileMenuClick(item, handleSelect)
 }
 
-function openMobileFavoritesPanel () {
-  mobileMenuPath.value = []
-  mobileFavoritesPanel.value = true
-}
-
-function handleMobileMenuClick (item) {
-  if (item?.subItems?.length) {
-    mobileMenuPath.value = [...mobileMenuPath.value, item]
-    return
-  }
-  handleSelect(item)
-}
-
-const localFavoritesBarVisible = ref(true)
-const localBreadcrumbBarVisible = ref(true)
-const showFavoritesBar = computed({
-  get: () => (props.favoritesBarVisible ?? localFavoritesBarVisible.value),
-  set: (value) => {
-    if (props.favoritesBarVisible === null) {
-      localFavoritesBarVisible.value = value
-      return
-    }
-    emit('update:favoritesBarVisible', value)
-  },
-})
-const showBreadcrumbBar = computed({
-  get: () => (props.breadcrumbBarVisible ?? localBreadcrumbBarVisible.value),
-  set: (value) => {
-    if (props.breadcrumbBarVisible === null) {
-      localBreadcrumbBarVisible.value = value
-      return
-    }
-    emit('update:breadcrumbBarVisible', value)
-  },
-})
-
-function toggleFavoritesBar (nextValue) {
-  showFavoritesBar.value = typeof nextValue === 'boolean' ? nextValue : !showFavoritesBar.value
-}
-
-let appBarObserver
-// 量測 v-app-bar 實際高度（常用功能/麵包屑顯示時會改變）
-function updateAppBarHeight () {
-  const el = appBarRef.value?.$el ?? appBarRef.value
-  if (!el) return
-  appBarHeight.value = Math.round(el.getBoundingClientRect().height || 0)
-}
-
-onMounted(() => {
-  // 初次量測高度
-  updateAppBarHeight()
-  if (typeof ResizeObserver === 'undefined') return
-  const el = appBarRef.value?.$el ?? appBarRef.value
-  if (!el) return
-  // 監聽高度變化，讓 v-main paddingTop 同步更新
-  appBarObserver = new ResizeObserver(() => updateAppBarHeight())
-  appBarObserver.observe(el)
-})
-
-onBeforeUnmount(() => {
-  if (!appBarObserver) return
-  appBarObserver.disconnect()
-  appBarObserver = null
-})
-
-function handleUnshrink () {
-  isRail.value = false
-}
-
-function handleSelect (item) {
+function handleSelect (item: AdminLayoutMenuItem) {
   emit('select', item)
   if (isMobile.value) drawer.value = false
 }
 
-const mainStyle = computed(() => {
-  const appBarHeightValue = appBarHeight.value
-  return {
-    // 以 paddingTop 騰出 appBar 空間，避免內容被遮擋
-    paddingTop: appBarHeightValue ? `${appBarHeightValue}px` : undefined,
-    // 固定 v-main 高度，讓內容區塊能在固定高度內滾動
-    height: '100vh',
-    minHeight: 0,
-    flex: '1 1 0',
-  }
-})
-
-// watch(isMobile, (value) => {
-//   if (value) {
-//     isRail.value = false
-//   }
-// })
-watch(isMobile, (value) => {
-  if (!value) {
-    mobileFavoritesPanel.value = false
-    mobileMenuPath.value = []
-  }
-})
-watch(drawer, (value) => {
-  if (!value) {
-    mobileFavoritesPanel.value = false
-    mobileMenuPath.value = []
-  }
-})
-
-function getMobileMenuBtnVariant (level) {
+function getMobileMenuBtnVariant (level: number) {
   return !mobileFavoritesPanel.value && level === mobileCurrentLevel.value
     ? 'flat'
     : 'outlined'
 }
 
-function getMobileMenuBtnColor (level) {
+function getMobileMenuBtnColor (level: number) {
   return level === mobileCurrentLevel.value ? 'primary' : 'secondary'
 }
 </script>

src/components/layouts/SKMainLayout.vue

@@ -1,252 +1,62 @@
 <template>
-  <v-app>
-    <v-navigation-drawer v-model="drawer">
-      <v-list v-model:opened="opened" color="primary" density="compact" prepend-gap="8">
-        <!-- 收藏項目區塊 -->
-        <template v-if="favoriteItems?.length">
-          <v-list-subheader class="bg-primary-variant" color="on-primary">
-            <div class="d-flex align-center w-100">
-              <span class="flex-grow-1">{{ favoriteHeaderLabel }}</span>
-              <v-btn
-density="compact" :icon="mdiUnfoldLessHorizontal" :ripple="false" variant="text"
-                @click.stop="collapseFavoriteGroups" />
-            </div>
-          </v-list-subheader>
-          <template v-for="item in favoriteItems" :key="item.path ?? item.title">
-            <!-- 第一層：有子項目的群組 -->
-            <v-list-group v-if="item.subItems?.length" :value="`fav:${item.path ?? item.title}`">
-              <template #activator="{ props }">
-                <v-list-item v-bind="props" :link="isNavigable(item)" :to="isNavigable(item) ? item.path : undefined">
-                  <!-- 第一層 title（父層） -->
-                  <template #title>
-                    <span class="text-body-2 nav-text-overflow">{{ item.title }}</span>
-                  </template>
-                </v-list-item>
-              </template>
-              <template v-for="subItem in item.subItems" :key="subItem.path ?? subItem.title">
-                <!-- 第二層：無子項目的單一項目 -->
-                <v-list-item :link="!!subItem.path" :to="subItem.path">
-                  <!-- 第二層 title（葉節點） -->
-                  <template #title>
-                    <v-tooltip location="end" :text="subItem.title">
-                      <template #activator="{ props: tooltipProps }">
-                        <span v-bind="tooltipProps" class="text-body-2 nav-text-overflow">{{ subItem.title }}</span>
-                      </template>
-                    </v-tooltip>
-                  </template>
-                </v-list-item>
-              </template>
-            </v-list-group>
-            <!-- 第一層：無子項目的單一項目 -->
-            <v-list-item v-else :link="!!item.path" :to="item.path">
-              <!-- 第一層 title（葉節點） -->
-              <template #title>
-                <v-tooltip location="end" :text="item.title">
-                  <template #activator="{ props: tooltipProps }">
-                    <span v-bind="tooltipProps" class="text-body-2 nav-text-overflow">{{ item.title }}</span>
-                  </template>
-                </v-tooltip>
-              </template>
-            </v-list-item>
-          </template>
-        </template>
-
-        <v-list-subheader class="bg-primary" color="on-primary">
-          <div class="d-flex align-center w-100">
-            <span class="flex-grow-1">{{ menuHeaderLabel }}</span>
-            <v-btn
-density="compact" :icon="mdiUnfoldLessHorizontal" :ripple="false" variant="text"
-              @click.stop="collapseMenuGroups" />
-          </div>
-        </v-list-subheader>
-        <!-- 主選單區塊 -->
-        <template v-for="item in menuItems" :key="item.path ?? item.title">
-          <!-- 第一層：有子項目的群組 -->
-          <v-list-group v-if="item.subItems?.length" :value="`menu:${item.path ?? item.title}`">
-            <template #activator="{ props }">
-              <v-list-item
-v-bind="props" :link="isNavigable(item) && !!item.path"
-                :to="isNavigable(item) ? item.path : undefined">
-                <!-- 第一層 title（父層） -->
-                <template #title>
-                  <span class="text-body-2 nav-text-overflow">{{ item.title }}</span>
-                </template>
-              </v-list-item>
-            </template>
-            <template v-for="subItem in item.subItems" :key="subItem.path ?? subItem.title">
-              <!-- 第二層：有子項目的群組 -->
-              <v-list-group
-v-if="subItem.subItems?.length"
-                :value="`menu:${item.path ?? item.title}::${subItem.path ?? subItem.title}`">
-                <template #activator="{ props: subProps }">
-                  <v-list-item
-v-bind="subProps" :link="isNavigable(subItem)"
-                    :to="isNavigable(subItem) ? subItem.path : undefined">
-                    <!-- 第二層 title（父層） -->
-                    <template #title>
-                      <span class="text-body-2 nav-text-overflow">{{ subItem.title }}</span>
-                    </template>
-                  </v-list-item>
-                </template>
-
-                <!-- 第三層：最底層項目 -->
-                <v-list-item
-v-for="subSubItem in subItem.subItems" :key="subSubItem.path ?? subSubItem.title"
-                  :link="!!subSubItem.path" :to="subSubItem.path">
-                  <!-- 第三層 title（葉節點） -->
-                  <template #title>
-                    <v-tooltip location="end" :text="subSubItem.title">
-                      <template #activator="{ props: tooltipProps }">
-                        <span v-bind="tooltipProps" class="text-body-2 nav-text-overflow">{{ subSubItem.title }}</span>
-                      </template>
-                    </v-tooltip>
-                  </template>
-                </v-list-item>
-              </v-list-group>
-
-              <!-- 第二層：無子項目的單一項目 -->
-              <v-list-item v-else :link="!!subItem.path" :to="subItem.path">
-                <!-- 第二層 title（葉節點） -->
-                <template #title>
-                  <v-tooltip location="end" :text="subItem.title">
-                    <template #activator="{ props: tooltipProps }">
-                      <span v-bind="tooltipProps" class="text-body-2 nav-text-overflow">{{ subItem.title }}</span>
-                    </template>
-                  </v-tooltip>
-                </template>
-              </v-list-item>
-            </template>
-          </v-list-group>
-          <!-- 第一層：無子項目的單一項目 -->
-          <v-list-item v-else :link="!!item.path" :to="item.path">
-            <!-- 第一層 title（葉節點） -->
-            <template #title>
-              <v-tooltip location="end" :text="item.title">
-                <template #activator="{ props: tooltipProps }">
-                  <span v-bind="tooltipProps" class="text-body-2 nav-text-overflow">{{ item.title }}</span>
-                </template>
-              </v-tooltip>
-            </template>
-          </v-list-item>
-        </template>
-      </v-list>
-    </v-navigation-drawer>
-
-    <v-app-bar density="compact">
-      <v-app-bar-nav-icon @click="drawer = !drawer" />
-      <v-toolbar-title>{{ systemTitle }}</v-toolbar-title>
-      <v-spacer />
-      <v-tooltip location="bottom" :text="themeToggleLabel">
-        <template #activator="{ props }">
-          <v-btn v-bind="props" :aria-label="themeToggleLabel" :icon="mdiPalette" variant="text" @click="toggleTheme" />
-        </template>
-      </v-tooltip>
-
-      <v-tooltip location="bottom" :text="logoutLabel">
-        <template #activator="{ props }">
-          <v-btn v-bind="props" :aria-label="logoutLabel" :icon="mdiLogout" variant="text" @click="$emit('logout')" />
-        </template>
-      </v-tooltip>
-    </v-app-bar>
-
-    <v-main>
-      <v-container class="pa-2" fluid height="100%">
-        <slot></slot>
-      </v-container>
-    </v-main>
-  </v-app>
+  <SKAdminLayout
+    :favorite-items="favoriteItems"
+    :favorites-config="favoritesConfig"
+    :menu-items="menuItems"
+    :system-title="systemTitle"
+    :theme-toggle-label="themeToggleLabel"
+    :logout-label="logoutLabel"
+    :features="features"
+    @logout="$emit('logout')"
+    @select="$emit('select', $event)"
+  >
+    <slot />
+  </SKAdminLayout>
 </template>
 
-<script setup>
-import { mdiLogout, mdiPalette, mdiUnfoldLessHorizontal } from '@mdi/js'
-import { computed, ref } from 'vue'
-import { useTheme } from 'vuetify'
-import { getNextThemeName } from '@/utils/theme'
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { AdminLayoutFavoritesConfig, AdminLayoutMenuItem } from './sk-admin-layout/types'
+import SKAdminLayout from './SKAdminLayout.vue'
 
-defineEmits(['logout'])
+interface Props {
+  systemTitle?: string
+  themeToggleLabel?: string
+  logoutLabel?: string
+  favoriteHeaderLabel?: string
+  favoriteItems?: AdminLayoutMenuItem[]
+  menuItems?: AdminLayoutMenuItem[]
+}
 
-defineProps({
-  systemTitle: { type: String, default: '管理系統' },
-  themeToggleLabel: { type: String, default: '切換主題' },
-  logoutLabel: { type: String, default: '登出' },
-  favoriteHeaderLabel: { type: String, default: '我的最愛' },
-  menuHeaderLabel: { type: String, default: '選單' },
-  favoriteItems: {
-    type: Array,
-    default: () => [],
-  },
-  menuItems: {
-    type: Array,
-    default: () => [
+const props = withDefaults(defineProps<Props>(), {
+  systemTitle: '管理系統',
+  themeToggleLabel: '切換主題',
+  logoutLabel: '登出',
+  favoriteHeaderLabel: '我的最愛',
+  favoriteItems: () => [],
+  menuItems: () => [
       { title: '首頁', path: '/' },
       { title: '設定', path: '/settings' },
     ],
-  },
 })
 
-const drawer = ref(true)
+defineEmits<{
+  logout: []
+  select: [item: AdminLayoutMenuItem]
+}>()
 
-const opened = ref([])
-
-const theme = useTheme()
-
-const availableThemeNames = computed(() =>
-  Object.keys(theme.themes.value ?? {}).filter((name) => name.startsWith('theme'))
-)
-
-function toggleTheme () {
-  const names = availableThemeNames.value
-  if (names.length === 0) return
-
-  const current = theme.global.name.value
-  const next = getNextThemeName(names, current)
-  if (!next) return
-  theme.change(next)
+const features = {
+  showThemeToggle: true,
+  showFavorites: true,
+  showBreadcrumb: false,
+  showSearch: false,
+  showToolbarActions: false,
+  showUserInfo: false,
 }
 
-function collapseFavoriteGroups () {
-  opened.value = opened.value.filter((key) => !String(key).startsWith('fav:'))
-}
-
-function collapseMenuGroups () {
-  opened.value = opened.value.filter((key) => !String(key).startsWith('menu:'))
-}
-
-const isNavigable = (item) => item?.navigable !== false
+const favoritesConfig = computed<AdminLayoutFavoritesConfig>(() => ({
+  label: props.favoriteHeaderLabel,
+  addLabel: props.favoriteHeaderLabel,
+  showAdd: false,
+}))
 </script>
-
-<style scoped>
-.nav-text-overflow {
-  display: inline-block;
-  max-width: 100%;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-/* 確保 v-list-group 的 activator 也有 hover 效果 */
-:deep(.v-list-group > .v-list-item) {
-  cursor: pointer;
-  transition: background-color 0.2s ease, color 0.2s ease;
-}
-
-:deep(.v-list-group > .v-list-item:hover) {
-  background: rgb(var(--v-theme-on-surface-variant));
-  color: rgb(var(--v-theme-on-surface));
-}
-
-/* 為所有 v-list-item 加上 transition */
-:deep(.v-list-item) {
-  transition: background-color 0.2s ease, color 0.2s ease;
-}
-
-:deep(.v-navigation-drawer__content) {
-  scrollbar-gutter: stable;
-}
-
-@supports not (scrollbar-gutter: stable) {
-  :deep(.v-navigation-drawer__content) {
-    overflow-y: scroll;
-  }
-}
-</style>

src/components/layouts/SKSimpleLayout.vue

@@ -1,119 +1,36 @@
 <template>
-  <v-app>
-    <v-app-bar color="surface">
-      <v-toolbar-title>{{ systemTitle }}</v-toolbar-title>
-      <v-spacer />
-      <v-menu
-        v-model="menuOpen"
-        :close-on-content-click="false"
-        :location="menuLocation"
-        :max-height="menuMaxHeight"
-        offset="8"
-        scroll-strategy="reposition"
-        :width="menuWidth"
-      >
-        <template #activator="{ props }">
-          <v-btn v-bind="props" :icon="mdiDotsVertical" />
-        </template>
-
-        <v-list :density="menuDensity">
-          <template v-for="(item, index) in menuItems" :key="item?.key ?? item?.path ?? index">
-            <v-list-group
-              v-if="smAndDown && item?.subItems?.length"
-              :value="item?.key ?? item?.path ?? index"
-            >
-              <template #activator="{ props }">
-                <v-list-item v-bind="props" :prepend-icon="item.icon" :title="item.title" />
-              </template>
-
-              <v-list-item
-                v-for="(subItem, subIndex) in item.subItems"
-                :key="subItem?.key ?? subItem?.path ?? subIndex"
-                class="pl-6"
-                :prepend-icon="subItem.icon"
-                :title="subItem.title"
-                @click="handleSelect(subItem)"
-              />
-            </v-list-group>
-
-            <v-menu
-              v-else-if="item?.subItems?.length"
-              close-delay="120"
-              :close-on-content-click="false"
-              location="end top"
-              offset="0"
-              open-delay="80"
-              :open-on-hover="submenuOpenOnHover"
-              origin="start top"
-              scroll-strategy="reposition"
-              submenu
-            >
-              <template #activator="{ props }">
-                <v-list-item
-                  v-bind="props"
-                  :append-icon="mdiChevronRight"
-                  :prepend-icon="item.icon"
-                  :title="item.title"
-                />
-              </template>
-
-              <v-list :density="menuDensity">
-                <v-list-item
-                  v-for="(subItem, subIndex) in item.subItems"
-                  :key="subItem?.key ?? subItem?.path ?? subIndex"
-                  :prepend-icon="subItem.icon"
-                  :title="subItem.title"
-                  @click="handleSelect(subItem)"
-                />
-              </v-list>
-            </v-menu>
-
-            <v-list-item
-              v-else
-              :prepend-icon="item.icon"
-              :title="item.title"
-              @click="handleSelect(item)"
-            />
-          </template>
-        </v-list>
-      </v-menu>
-    </v-app-bar>
-
-    <v-main>
-      <v-container fluid height="100%">
-        <slot></slot>
-      </v-container>
-    </v-main>
-  </v-app>
+  <SKAdminLayout
+    :menu-items="menuItems"
+    :system-title="systemTitle"
+    :features="features"
+    @select="$emit('select', $event)"
+  >
+    <slot />
+  </SKAdminLayout>
 </template>
 
-<script setup>
-import { mdiChevronRight, mdiDotsVertical } from '@mdi/js'
-import { computed, ref } from 'vue'
-import { useDisplay } from 'vuetify'
+<script setup lang="ts">
+import type { AdminLayoutMenuItem } from './sk-admin-layout/types'
+import SKAdminLayout from './SKAdminLayout.vue'
 
-const emit = defineEmits(['select'])
-
-defineProps({
-  systemTitle: { type: String, default: '簡潔模式' },
-  menuItems: {
-    type: Array,
-    default: () => [],
-  },
+withDefaults(defineProps<{
+  systemTitle?: string
+  menuItems?: AdminLayoutMenuItem[]
+}>(), {
+  systemTitle: '簡潔模式',
+  menuItems: () => [],
 })
 
-const menuOpen = ref(false)
+defineEmits<{
+  select: [item: AdminLayoutMenuItem]
+}>()
 
-const { smAndDown } = useDisplay()
-
-const menuDensity = computed(() => (smAndDown.value ? 'default' : 'compact'))
-const menuWidth = computed(() => (smAndDown.value ? 280 : 240))
-const menuMaxHeight = computed(() => (smAndDown.value ? 420 : 360))
-const menuLocation = computed(() => (smAndDown.value ? 'bottom end' : 'bottom end'))
-const submenuOpenOnHover = computed(() => !smAndDown.value)
-
-function handleSelect (item) {
-  menuOpen.value = false
-  emit('select', item)
+const features = {
+  showThemeToggle: false,
+  showFavorites: false,
+  showBreadcrumb: false,
+  showSearch: false,
+  showToolbarActions: false,
+  showUserInfo: false,
 }
 </script>

src/components/layouts/sk-admin-layout/SkAdminAppBarBreadcrumbCol.vue

@@ -12,8 +12,8 @@ v-if="features.showFavorites && !showFavoritesBar" class="mr-2" color="primary"
       </template>
       <template #item="{ item }">
         <div class="d-flex align-center ga-1">
-          <v-icon v-if="item.icon" class="mr-1" size="14" :icon="item.icon" />
-          <span class="text-caption text-no-wrap">{{ item.title }}</span>
+          <v-icon v-if="getBreadcrumbIcon(item)" class="mr-1" size="14" :icon="getBreadcrumbIcon(item)" />
+          <span class="text-caption text-no-wrap">{{ getBreadcrumbTitle(item) }}</span>
         </div>
       </template>
       <template #divider>
@@ -26,15 +26,51 @@ v-if="features.showFavorites && !showFavoritesBar" class="mr-2" color="primary"
   </v-col>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { mdiChevronRight } from '@mdi/js'
-defineProps({
-  features: { type: Object, default: () => ({}) },
-  showBreadcrumbBar: { type: Boolean, default: true },
-  isMobile: { type: Boolean, default: false },
-  breadcrumbItems: { type: Array, default: () => [] },
-  showFavoritesBar: { type: Boolean, default: true },
+import type { AdminLayoutBreadcrumbItem, AdminLayoutFeatures } from './types'
+
+interface Props {
+  features?: AdminLayoutFeatures
+  showBreadcrumbBar?: boolean
+  isMobile?: boolean
+  breadcrumbItems?: AdminLayoutBreadcrumbItem[]
+  showFavoritesBar?: boolean
+}
+
+withDefaults(defineProps<Props>(), {
+  features: () => ({
+    showThemeToggle: false,
+    showFavorites: true,
+    showBreadcrumb: true,
+    showSearch: true,
+    showToolbarActions: true,
+    showUserInfo: true,
+  }),
+  showBreadcrumbBar: true,
+  isMobile: false,
+  breadcrumbItems: () => [],
+  showFavoritesBar: true,
 })
 
-const emit = defineEmits(['toggle-favorites-bar'])
+const emit = defineEmits<{
+  'toggle-favorites-bar': [value: boolean]
+}>()
+
+function getBreadcrumbItem (item: unknown): AdminLayoutBreadcrumbItem | null {
+  if (typeof item !== 'object' || item === null) return null
+
+  const raw = (item as { raw?: unknown }).raw
+  if (typeof raw !== 'object' || raw === null) return null
+
+  return raw as AdminLayoutBreadcrumbItem
+}
+
+function getBreadcrumbIcon (item: unknown) {
+  return getBreadcrumbItem(item)?.icon
+}
+
+function getBreadcrumbTitle (item: unknown) {
+  return getBreadcrumbItem(item)?.title ?? ''
+}
 </script>

src/components/layouts/sk-admin-layout/SkAdminAppBarFavoritesCol.vue

@@ -28,17 +28,43 @@ v-if="favoritesConfig.showAdd" class="favorite-add" color="primary" size="small"
   </v-col>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { mdiEyeOff, mdiPlus } from '@mdi/js'
-defineProps({
-  features: { type: Object, default: () => ({}) },
-  showFavoritesBar: { type: Boolean, default: true },
-  isMobile: { type: Boolean, default: false },
-  favoritesConfig: { type: Object, default: () => ({}) },
-  favoriteItems: { type: Array, default: () => [] },
+import type { AdminLayoutFavoritesConfig, AdminLayoutFeatures, AdminLayoutMenuItem } from './types'
+
+interface Props {
+  features?: AdminLayoutFeatures
+  showFavoritesBar?: boolean
+  isMobile?: boolean
+  favoritesConfig?: AdminLayoutFavoritesConfig
+  favoriteItems?: AdminLayoutMenuItem[]
+}
+
+withDefaults(defineProps<Props>(), {
+  features: () => ({
+    showThemeToggle: false,
+    showFavorites: true,
+    showBreadcrumb: true,
+    showSearch: true,
+    showToolbarActions: true,
+    showUserInfo: true,
+  }),
+  showFavoritesBar: true,
+  isMobile: false,
+  favoritesConfig: () => ({
+    label: '',
+    addLabel: '',
+    showAdd: false,
+  }),
+  favoriteItems: () => [],
 })
 
-const emit = defineEmits(['select', 'add-favorite', 'remove-favorite', 'toggle-favorites-bar'])
+const emit = defineEmits<{
+  select: [item: AdminLayoutMenuItem]
+  'add-favorite': []
+  'remove-favorite': [item: AdminLayoutMenuItem]
+  'toggle-favorites-bar': [value: boolean]
+}>()
 </script>
 
 <style scoped>

src/components/layouts/sk-admin-layout/SkAdminAppBarTopCol.vue

@@ -117,33 +117,65 @@ v-bind="{ ...menuProps, ...tooltipProps }" :aria-label="toolbarActions.settingsL
   </v-col>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { mdiBellOutline, mdiCogOutline, mdiHelp, mdiLogout, mdiMagnify, mdiMenu, mdiMessageTextOutline, mdiPaletteOutline } from '@mdi/js'
 import { computed } from 'vue'
+import type { AdminLayoutActionType, AdminLayoutFeatures, AdminLayoutSearchConfig, AdminLayoutToolbarActions, AdminLayoutToolbarCounts } from './types'
 
-const props = defineProps({
-  isMobile: { type: Boolean, default: false },
-  features: { type: Object, default: () => ({}) },
-  searchValue: { type: String, default: '' },
-  searchConfig: { type: Object, default: () => ({}) },
-  toolbarActions: { type: Object, default: () => ({}) },
-  toolbarCounts: { type: Object, default: () => ({}) },
-  logoutLabel: { type: String, default: '' },
-  themeToggleLabel: { type: String, default: '' },
-  showFavoritesBar: { type: Boolean, default: true },
-  showBreadcrumbBar: { type: Boolean, default: true },
+interface Props {
+  isMobile?: boolean
+  features?: AdminLayoutFeatures
+  searchValue?: string
+  searchConfig?: AdminLayoutSearchConfig
+  toolbarActions?: AdminLayoutToolbarActions
+  toolbarCounts?: AdminLayoutToolbarCounts
+  logoutLabel?: string
+  themeToggleLabel?: string
+  showFavoritesBar?: boolean
+  showBreadcrumbBar?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  isMobile: false,
+  features: () => ({
+    showThemeToggle: false,
+    showFavorites: true,
+    showBreadcrumb: true,
+    showSearch: true,
+    showToolbarActions: true,
+    showUserInfo: true,
+  }),
+  searchValue: '',
+  searchConfig: () => ({
+    placeholder: '',
+    label: '',
+  }),
+  toolbarActions: () => ({
+    notificationsLabel: '',
+    messagesLabel: '',
+    helpLabel: '',
+    settingsLabel: '',
+  }),
+  toolbarCounts: () => ({
+    notifications: 0,
+    messages: 0,
+  }),
+  logoutLabel: '',
+  themeToggleLabel: '',
+  showFavoritesBar: true,
+  showBreadcrumbBar: true,
 })
 
-const emit = defineEmits([
-  'toggle-drawer',
-  'update:searchValue',
-  'search',
-  'action',
-  'logout',
-  'toggle-theme',
-  'update:showFavoritesBar',
-  'update:showBreadcrumbBar',
-])
+const emit = defineEmits<{
+  'toggle-drawer': []
+  'update:searchValue': [value: string]
+  search: []
+  action: [type: AdminLayoutActionType]
+  logout: []
+  'toggle-theme': []
+  'update:showFavoritesBar': [value: boolean]
+  'update:showBreadcrumbBar': [value: boolean]
+}>()
 
 const searchValueModel = computed({
   get: () => props.searchValue,

src/components/layouts/sk-admin-layout/SkAdminDrawerDesktopMenu.vue

@@ -95,19 +95,11 @@ v-else :link="!!subItem.path" :prepend-icon="subItem.icon || mdiMenuRight" :to="
 <script setup lang="ts">
 import { mdiCircleSmall, mdiMenuRight } from '@mdi/js'
 import { computed, watch } from 'vue'
-
-interface MenuItem {
-  title?: string
-  path?: string
-  icon?: string
-  navigable?: boolean
-  subItems?: MenuItem[]
-  [key: string]: unknown
-}
+import type { AdminLayoutMenuItem } from './types'
 
 interface Props {
   opened?: string[]
-  menuItems?: MenuItem[]
+  menuItems?: AdminLayoutMenuItem[]
   isShrink?: boolean
 }
 
@@ -119,7 +111,7 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits<{
   'update:opened': [value: string[]]
-  select: [item: MenuItem]
+  select: [item: AdminLayoutMenuItem]
   unshrink: []
 }>()
 
@@ -139,9 +131,9 @@ watch(() => props.isShrink, (newVal) => {
   }
 })
 
-const isNavigable = (item: MenuItem) => item?.navigable !== false
+const isNavigable = (item: AdminLayoutMenuItem) => item?.navigable !== false
 
-function emitSelect (item: MenuItem) {
+function emitSelect (item: AdminLayoutMenuItem) {
   // 收縮狀態下點擊選單項目時，先解除收縮再進行選擇
   // 這樣可以讓使用者看到完整的選單結構和導航結果
   if (props.isShrink) {
@@ -150,10 +142,10 @@ function emitSelect (item: MenuItem) {
   emit('select', item)
 }
 
-function getItemCount (item: MenuItem) {
+function getItemCount (item: AdminLayoutMenuItem) {
   if (!item?.subItems?.length) return 0
-  const countLeaf = (list: MenuItem[]): number =>
-    (list || []).reduce((total: number, current: MenuItem) => {
+  const countLeaf = (list: AdminLayoutMenuItem[]): number =>
+    (list || []).reduce((total: number, current: AdminLayoutMenuItem) => {
       if (current?.subItems?.length) return total + countLeaf(current.subItems)
       return total + 1
     }, 0)

src/components/layouts/sk-admin-layout/SkAdminDrawerMobileFavoritesPanel.vue

@@ -10,15 +10,18 @@ v-for="item in favoriteItems" :key="item.path ?? item.title" class="mb-1" rounde
   </v-sheet>
 </template>
 
-<script setup>
-defineProps({
-  favoriteItems: {
-    type: Array,
-    default: () => [],
-  },
+<script setup lang="ts">
+import type { AdminLayoutMenuItem } from './types'
+
+withDefaults(defineProps<{
+  favoriteItems?: AdminLayoutMenuItem[]
+}>(), {
+  favoriteItems: () => [],
 })
 
-const emit = defineEmits(['select'])
+const emit = defineEmits<{
+  select: [item: AdminLayoutMenuItem]
+}>()
 </script>
 
 <style scoped>

src/components/layouts/sk-admin-layout/SkAdminDrawerMobileMenuPanel.vue

@@ -13,16 +13,19 @@ v-for="item in mobileCurrentItems" :key="item.path ?? item.title" class="mb-1" r
   </v-sheet>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { mdiArrowTopRight, mdiChevronRight } from '@mdi/js'
-defineProps({
-  mobileCurrentItems: {
-    type: Array,
-    default: () => [],
-  },
+import type { AdminLayoutMenuItem } from './types'
+
+withDefaults(defineProps<{
+  mobileCurrentItems?: AdminLayoutMenuItem[]
+}>(), {
+  mobileCurrentItems: () => [],
 })
 
-const emit = defineEmits(['item-click'])
+const emit = defineEmits<{
+  'item-click': [item: AdminLayoutMenuItem]
+}>()
 </script>
 
 <style scoped>

src/components/layouts/sk-admin-layout/types.ts

@@ -0,0 +1,71 @@
+export type AdminLayoutIcon = string
+
+export interface AdminLayoutMenuItem {
+  title: string
+  path?: string
+  icon?: AdminLayoutIcon
+  navigable?: boolean
+  subItems?: AdminLayoutMenuItem[]
+}
+
+export interface AdminLayoutUserProfile {
+  name: string
+  role: string
+  avatarText: string
+}
+
+export interface AdminLayoutSearchConfig {
+  placeholder: string
+  label: string
+}
+
+export interface AdminLayoutToolbarActions {
+  notificationsLabel: string
+  messagesLabel: string
+  helpLabel: string
+  settingsLabel: string
+}
+
+export interface AdminLayoutToolbarCounts {
+  notifications: number
+  messages: number
+}
+
+export interface AdminLayoutFavoritesConfig {
+  label: string
+  addLabel: string
+  showAdd: boolean
+}
+
+export interface AdminLayoutBreadcrumbConfig {
+  homeLabel: string
+  homeDisabled: boolean
+  homeIcon?: AdminLayoutIcon
+}
+
+export interface AdminLayoutBreadcrumbItem {
+  title: string
+  disabled?: boolean
+  icon?: AdminLayoutIcon
+  href?: string
+  to?: string
+}
+
+export interface AdminLayoutFeatures {
+  showThemeToggle: boolean
+  showFavorites: boolean
+  showBreadcrumb: boolean
+  showSearch: boolean
+  showToolbarActions: boolean
+  showUserInfo: boolean
+}
+
+export interface AdminLayoutDrawerConfig {
+  width: number
+  railWidth: number
+}
+
+export type AdminLayoutActionType =
+  | 'notifications'
+  | 'messages'
+  | 'help'