From 24661a17b38351856db888d640d57b5b2e9d7820 Mon Sep 17 00:00:00 2001
From: skytek_xinliang <carl@skytek.com.tw>
Date: Fri, 27 Mar 2026 15:35:36 +0800
Subject: [PATCH] refactor: update v-model bindings and emit event names for
 favorites and breadcrumb visibility

---
 src/components/layouts/SKAdminLayout.vue            | 13 +++++--------
 .../layouts/sk-admin-layout/SkAdminAppBarTopCol.vue |  8 ++++----
 src/composables/layout/useAdminLayoutState.ts       | 12 ++++++------
 3 files changed, 15 insertions(+), 18 deletions(-)

diff --git a/src/components/layouts/SKAdminLayout.vue b/src/components/layouts/SKAdminLayout.vue
index cf39492..49f4abc 100644
--- a/src/components/layouts/SKAdminLayout.vue
+++ b/src/components/layouts/SKAdminLayout.vue
@@ -119,20 +119,17 @@
           :is-mobile="isMobile"
           :logout-label="logoutLabel"
           :search-config="searchConfig"
-          :search-value="searchValue"
-          :breadcrumb-bar-visible="breadcrumbBarVisible"
-          :show-favorites-bar="showFavoritesBar"
           :theme-toggle-label="themeToggleLabel"
           :toolbar-actions="toolbarActions"
           :toolbar-counts="toolbarCounts"
+          v-model:search-value="searchValue"
+          v-model:breadcrumb-bar-visible="breadcrumbBarVisible"
+          v-model:show-favorites-bar="showFavoritesBar"
           @action="handleAction"
           @logout="emitLogout"
           @search="triggerSearch"
           @toggle-drawer="drawer = !drawer"
           @toggle-theme="toggleTheme"
-          @update:search-value="searchValue = $event"
-          @update:breadcrumb-bar-visible="breadcrumbBarVisible = $event"
-          @update:show-favorites-bar="showFavoritesBar = $event"
         >
           <template v-if="$slots.actions" #actions>
             <slot name="actions"></slot>
@@ -395,11 +392,11 @@ const {
   toggleSidebar,
 } = useAdminLayoutState({
   appBarRef,
-  breadcrumbBarVisible: props.breadcrumbBarVisible,
+  breadcrumbBarVisible: toRef(props, 'breadcrumbBarVisible'),
   emitUpdateBreadcrumbBarVisible: (value) => emit('update:breadcrumbBarVisible', value),
   emitUpdateFavoritesBarVisible: (value) => emit('update:favoritesBarVisible', value),
   emitUpdateIsRail: (value) => emit('update:isRail', value),
-  favoritesBarVisible: props.favoritesBarVisible,
+  favoritesBarVisible: toRef(props, 'favoritesBarVisible'),
   isMobile,
   isRail: toRef(props, 'isRail'), // 傳 Ref 確保 composable getter 能隨 prop 更新
   menuItems: props.menuItems,
diff --git a/src/components/layouts/sk-admin-layout/SkAdminAppBarTopCol.vue b/src/components/layouts/sk-admin-layout/SkAdminAppBarTopCol.vue
index 9bc6f04..a58ae04 100644
--- a/src/components/layouts/sk-admin-layout/SkAdminAppBarTopCol.vue
+++ b/src/components/layouts/sk-admin-layout/SkAdminAppBarTopCol.vue
@@ -175,8 +175,8 @@ const emit = defineEmits<{
   action: [type: AdminLayoutActionType]
   logout: []
   'toggle-theme': []
-  'update:showFavoritesBar': [value: boolean]
-  'update:breadcrumbBarVisible': [value: boolean]
+  'update:show-favorites-bar': [value: boolean]
+  'update:breadcrumb-bar-visible': [value: boolean]
 }>()
 
 const searchValueModel = computed({
@@ -186,12 +186,12 @@ const searchValueModel = computed({
 
 const showFavoritesBarModel = computed({
   get: () => props.showFavoritesBar,
-  set: (value) => emit('update:showFavoritesBar', value),
+  set: (value) => emit('update:show-favorites-bar', value),
 })
 
 const breadcrumbBarVisibleModel = computed({
   get: () => props.breadcrumbBarVisible,
-  set: (value) => emit('update:breadcrumbBarVisible', value),
+  set: (value) => emit('update:breadcrumb-bar-visible', value),
 })
 
 function triggerSearch () {
diff --git a/src/composables/layout/useAdminLayoutState.ts b/src/composables/layout/useAdminLayoutState.ts
index 62f806c..1567575 100644
--- a/src/composables/layout/useAdminLayoutState.ts
+++ b/src/composables/layout/useAdminLayoutState.ts
@@ -8,11 +8,11 @@ type ToggleSidebarPayload = {
 
 type UseAdminLayoutStateOptions = {
   appBarRef: Ref<unknown>
-  breadcrumbBarVisible: boolean | null
+  breadcrumbBarVisible: Ref<boolean | null>
   emitUpdateBreadcrumbBarVisible: (value: boolean) => void
   emitUpdateFavoritesBarVisible: (value: boolean) => void
   emitUpdateIsRail: (value: boolean) => void
-  favoritesBarVisible: boolean | null
+  favoritesBarVisible: Ref<boolean | null>
   isMobile: Ref<boolean>
   isRail: Ref<boolean | null> // 必須為 Ref，確保父層 prop 更新時 getter 能即時反映
   menuItems: AdminLayoutMenuItem[]
@@ -42,9 +42,9 @@ export function useAdminLayoutState(options: UseAdminLayoutStateOptions) {
   })
 
   const showFavoritesBar = computed({
-    get: () => options.favoritesBarVisible ?? localFavoritesBarVisible.value,
+    get: () => options.favoritesBarVisible.value ?? localFavoritesBarVisible.value,
     set: (value: boolean) => {
-      if (options.favoritesBarVisible === null) {
+      if (options.favoritesBarVisible.value === null) {
         localFavoritesBarVisible.value = value
         return
       }
@@ -54,9 +54,9 @@ export function useAdminLayoutState(options: UseAdminLayoutStateOptions) {
   })
 
   const breadcrumbBarVisible = computed({
-    get: () => options.breadcrumbBarVisible ?? localBreadcrumbBarVisible.value,
+    get: () => options.breadcrumbBarVisible.value ?? localBreadcrumbBarVisible.value,
     set: (value: boolean) => {
-      if (options.breadcrumbBarVisible === null) {
+      if (options.breadcrumbBarVisible.value === null) {
         localBreadcrumbBarVisible.value = value
         return
       }