From e3f76d865dc64c27d99a8013cebd3c087e9e1675 Mon Sep 17 00:00:00 2001
From: qianmoQ <shicheng@devlive.org>
Date: Wed, 28 Jan 2026 21:00:41 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E5=B8=83=E5=B1=80?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E4=BD=8D=E7=BD=AE=E9=94=99=E8=AF=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/ui/layout/ShadcnLayout.vue      | 44 ++++++++++++++++++++---------
 src/ui/layout/ShadcnLayoutSider.vue | 18 ++++++++++--
 src/ui/layout/injectionKey.ts       |  8 ++++++
 3 files changed, 53 insertions(+), 17 deletions(-)
 create mode 100644 src/ui/layout/injectionKey.ts

diff --git a/src/ui/layout/ShadcnLayout.vue b/src/ui/layout/ShadcnLayout.vue
index bd8bfa31..b7e1910c 100644
--- a/src/ui/layout/ShadcnLayout.vue
+++ b/src/ui/layout/ShadcnLayout.vue
@@ -1,26 +1,42 @@
 <template>
-  <div :class="['flex flex-1', hasSider ? 'flex-row' : 'flex-col']">
+  <div :class="['shadcn-layout flex flex-1', computedHasSider ? 'flex-row' : 'flex-col']">
     <slot></slot>
   </div>
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref, useSlots } from 'vue'
+import { computed, provide, ref } from 'vue'
+import { SiderHookProviderKey } from './injectionKey'
 
-const slots = useSlots()
-const hasSider = ref(false)
-
-const findSider = () => {
-  const children = slots.default?.()
-  if (!children) return false
+defineOptions({
+  name: 'ShadcnLayout'
+})
 
-  return children.some(child => {
-    const type = child.type as any
-    return type?.name === 'ShadcnLayoutSider' || type?.__name === 'ShadcnLayoutSider'
-  })
+interface Props {
+  hasSider?: boolean
 }
 
-onMounted(() => {
-  hasSider.value = findSider()
+const props = withDefaults(defineProps<Props>(), {
+  hasSider: undefined
+})
+
+const siders = ref<string[]>([])
+
+const computedHasSider = computed(() => {
+  // 如果显式设置了 hasSider prop，优先使用
+  if (typeof props.hasSider === 'boolean') {
+    return props.hasSider
+  }
+  // 否则根据注册的 sider 数量判断
+  return siders.value.length > 0
+})
+
+provide(SiderHookProviderKey, {
+  addSider: (id: string) => {
+    siders.value = [...siders.value, id]
+  },
+  removeSider: (id: string) => {
+    siders.value = siders.value.filter(s => s !== id)
+  }
 })
 </script>
diff --git a/src/ui/layout/ShadcnLayoutSider.vue b/src/ui/layout/ShadcnLayoutSider.vue
index 9f057af2..8f8acf12 100644
--- a/src/ui/layout/ShadcnLayoutSider.vue
+++ b/src/ui/layout/ShadcnLayoutSider.vue
@@ -29,11 +29,11 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { inject, onBeforeUnmount, onMounted, ref } from 'vue'
 import { ShadcnIcon } from '@/ui/icon'
+import { SiderHookProviderKey } from './injectionKey'
 
-interface Props
-{
+interface Props {
   width?: string
   collapsedWidth?: string
   collapsible?: boolean
@@ -45,6 +45,18 @@ defineOptions({
   name: 'ShadcnLayoutSider'
 })
 
+let uniqueId = ''
+const siderHook = inject(SiderHookProviderKey, undefined)
+
+onMounted(() => {
+  uniqueId = `shadcn-sider-${Date.now()}-${Math.random().toString(36).slice(2)}`
+  siderHook?.addSider(uniqueId)
+})
+
+onBeforeUnmount(() => {
+  siderHook?.removeSider(uniqueId)
+})
+
 const emit = defineEmits(['on-collapse'])
 
 const props = withDefaults(defineProps<Props>(), {
diff --git a/src/ui/layout/injectionKey.ts b/src/ui/layout/injectionKey.ts
new file mode 100644
index 00000000..0c992b34
--- /dev/null
+++ b/src/ui/layout/injectionKey.ts
@@ -0,0 +1,8 @@
+import type { InjectionKey } from 'vue'
+
+export interface SiderHookProvider {
+  addSider: (id: string) => void
+  removeSider: (id: string) => void
+}
+
+export const SiderHookProviderKey: InjectionKey<SiderHookProvider> = Symbol('SiderHookProvider')