diff --git a/configure/publish/publish-newVersion.sh b/configure/publish/publish-newVersion.sh
index 52d08df4..37d10c92 100644
--- a/configure/publish/publish-newVersion.sh
+++ b/configure/publish/publish-newVersion.sh
@@ -21,6 +21,28 @@ job_before_checked() {
     printf "============================================\n\n"
 }
 
+job_switch_to_version_branch() {
+    printf "\n\tJob switch to version branch \n"
+    printf "============================================\n"
+
+    # 检查分支是否存在
+    if git show-ref --verify --quiet "refs/heads/$VERSION"; then
+        printf "Branch '%s' exists, switching...\n" "$VERSION"
+        git checkout "$VERSION"
+    else
+        printf "Branch '%s' does not exist, creating...\n" "$VERSION"
+        git checkout -b "$VERSION"
+    fi
+
+    if [ $? -ne 0 ]; then
+        printf "Failed to switch to branch '%s'\n" "$VERSION"
+        exit 1
+    fi
+
+    printf "Now on branch: %s\n" "$VERSION"
+    printf "============================================\n\n"
+}
+
 job_check_version_diff() {
     printf "\n\tJob check version difference \n"
     printf "============================================\n"
@@ -121,6 +143,7 @@ job_runner_apply_playground() {
 
 job_before_echo_basic
 job_before_checked
+job_switch_to_version_branch
 job_check_version_diff
 job_runner_apply
-job_runner_apply_playground
+job_runner_apply_playground
\ No newline at end of file
diff --git a/docs/components/layout/layout.md b/docs/components/layout/layout.md
index e9a65f64..2ab47490 100644
--- a/docs/components/layout/layout.md
+++ b/docs/components/layout/layout.md
@@ -8,13 +8,15 @@ title: 布局 (Layout)
 
 本文档主要用于描述 `ShadcnLayout` 组件的一些特性和用法。
 
-## 用法
+Layout 组件提供了经典的页面布局，包含 Header、Content、Footer 和 Sider 组件，支持自动识别侧边栏并调整布局方向。
 
-<CodeRunner title="用法">
-    <ShadcnLayout :dark="darkMode">
-        <ShadcnLayoutHeader class="bg-blue-100 h-12">Header</ShadcnLayoutHeader>
-        <ShadcnLayoutContent class="bg-blue-500 h-32">Content</ShadcnLayoutContent>
-        <ShadcnLayoutFooter class="bg-blue-400 h-20">Footer</ShadcnLayoutFooter>
+## 基础用法
+
+<CodeRunner title="基础用法">
+    <ShadcnLayout>
+        <ShadcnLayoutHeader class="bg-sky-300 text-white h-12 flex items-center px-4">Header</ShadcnLayoutHeader>
+        <ShadcnLayoutContent class="bg-sky-600 text-white h-32 flex items-center px-4">Content</ShadcnLayoutContent>
+        <ShadcnLayoutFooter class="bg-sky-300 text-white h-16 flex items-center px-4">Footer</ShadcnLayoutFooter>
     </ShadcnLayout>
 </CodeRunner>
 
@@ -23,9 +25,9 @@ title: 布局 (Layout)
 ```vue
 <template>
 <ShadcnLayout>
-    <ShadcnLayoutHeader class="bg-blue-100 h-12">Header</ShadcnLayoutHeader>
-    <ShadcnLayoutContent class="bg-blue-500 h-32">Content</ShadcnLayoutContent>
-    <ShadcnLayoutFooter class="bg-blue-400 h-20">Footer</ShadcnLayoutFooter>
+    <ShadcnLayoutHeader class="bg-sky-300 text-white h-12 flex items-center px-4">Header</ShadcnLayoutHeader>
+    <ShadcnLayoutContent class="bg-sky-600 text-white h-32 flex items-center px-4">Content</ShadcnLayoutContent>
+    <ShadcnLayoutFooter class="bg-sky-300 text-white h-16 flex items-center px-4">Footer</ShadcnLayoutFooter>
 </ShadcnLayout>
 </template>
 
@@ -35,18 +37,18 @@ title: 布局 (Layout)
 
 :::
 
-## 侧边栏 (sider)
-
-<CodeRunner title="侧边栏 (sider)">
-    <ShadcnLayout :dark="darkMode">
-        <ShadcnLayoutWrapper>
-            <ShadcnLayoutSider class="w-48 bg-blue-100">Sider</ShadcnLayoutSider>
-            <ShadcnLayoutMain>
-                <ShadcnLayoutHeader class="bg-blue-100 h-12">Header</ShadcnLayoutHeader>
-                <ShadcnLayoutContent class="bg-blue-500 h-32">Content</ShadcnLayoutContent>
-                <ShadcnLayoutFooter class="bg-blue-400 h-20">Footer</ShadcnLayoutFooter>
-            </ShadcnLayoutMain>
-        </ShadcnLayoutWrapper>
+## 带侧边栏的布局
+
+Layout 会自动检测子组件中是否包含 Sider，如果包含则使用横向布局，否则使用纵向布局。
+
+<CodeRunner title="带侧边栏的布局">
+    <ShadcnLayout>
+        <ShadcnLayoutSider class="bg-sky-400 text-white min-h-[120px] flex items-center justify-center" :collapsible="false">Sider</ShadcnLayoutSider>
+        <ShadcnLayout>
+            <ShadcnLayoutHeader class="bg-sky-300 text-white h-12 flex items-center px-4">Header</ShadcnLayoutHeader>
+            <ShadcnLayoutContent class="bg-sky-600 text-white min-h-[120px] flex items-center px-4">Content</ShadcnLayoutContent>
+            <ShadcnLayoutFooter class="bg-sky-300 text-white h-16 flex items-center px-4">Footer</ShadcnLayoutFooter>
+        </ShadcnLayout>
     </ShadcnLayout>
 </CodeRunner>
 
@@ -54,16 +56,14 @@ title: 布局 (Layout)
 
 ```vue
 <template>
+<ShadcnLayout>
+    <ShadcnLayoutSider :collapsible="false">Sider</ShadcnLayoutSider>
     <ShadcnLayout>
-        <ShadcnLayoutWrapper>
-            <ShadcnLayoutSider class="w-48 bg-blue-100">Sider</ShadcnLayoutSider>
-            <ShadcnLayoutMain>
-                <ShadcnLayoutHeader class="bg-blue-100 h-12">Header</ShadcnLayoutHeader>
-                <ShadcnLayoutContent class="bg-blue-500 h-32">Content</ShadcnLayoutContent>
-                <ShadcnLayoutFooter class="bg-blue-400 h-20">Footer</ShadcnLayoutFooter>
-            </ShadcnLayoutMain>
-        </ShadcnLayoutWrapper>
+        <ShadcnLayoutHeader>Header</ShadcnLayoutHeader>
+        <ShadcnLayoutContent>Content</ShadcnLayoutContent>
+        <ShadcnLayoutFooter>Footer</ShadcnLayoutFooter>
     </ShadcnLayout>
+</ShadcnLayout>
 </template>
 
 <script setup lang="ts">
@@ -72,106 +72,59 @@ title: 布局 (Layout)
 
 :::
 
-## 布局示例 (layout)
-
-<CodeRunner title="布局示例 (layout)">
-    <div class="my-4 ml-2">Header + Content + Footer</div>
-    <ShadcnLayout :dark="darkMode">
-      <ShadcnLayoutHeader class="bg-blue-100 h-12">Header</ShadcnLayoutHeader>
-      <ShadcnLayoutContent class="bg-blue-500 h-32">Content</ShadcnLayoutContent>
-      <ShadcnLayoutFooter class="bg-blue-400 h-20">Footer</ShadcnLayoutFooter>
-    </ShadcnLayout>
-    <div class="my-4">Sider + (Header + Content + Footer)</div>
-    <ShadcnLayout :dark="darkMode">
-      <ShadcnLayoutWrapper>
-        <ShadcnLayoutSider class="w-48 bg-blue-100">Sider</ShadcnLayoutSider>
-        <ShadcnLayoutMain>
-          <ShadcnLayoutHeader class="bg-blue-100 h-12">Header</ShadcnLayoutHeader>
-          <ShadcnLayoutContent class="bg-blue-500 h-32">Content</ShadcnLayoutContent>
-          <ShadcnLayoutFooter class="bg-blue-400 h-20">Footer</ShadcnLayoutFooter>
-        </ShadcnLayoutMain>
-      </ShadcnLayoutWrapper>
-    </ShadcnLayout>
-    <div class="my-4">(Header + Content + Footer) + Sider</div>
-    <ShadcnLayout :dark="darkMode">
-      <ShadcnLayoutWrapper>
-        <ShadcnLayoutMain>
-          <ShadcnLayoutHeader class="bg-blue-100 h-12">Header</ShadcnLayoutHeader>
-          <ShadcnLayoutContent class="bg-blue-500 h-32">Content</ShadcnLayoutContent>
-          <ShadcnLayoutFooter class="bg-blue-400 h-20">Footer</ShadcnLayoutFooter>
-        </ShadcnLayoutMain>
-        <ShadcnLayoutSider class="w-48 bg-blue-100">Sider</ShadcnLayoutSider>
-      </ShadcnLayoutWrapper>
-    </ShadcnLayout>
-    <div class="my-4">Header + (Sider + Content) + Footer</div>
-    <ShadcnLayout :dark="darkMode">
-      <ShadcnLayoutHeader class="bg-blue-100 h-12">Header</ShadcnLayoutHeader>
-      <ShadcnLayoutWrapper>
-        <ShadcnLayoutSider class="w-48 bg-blue-100">Sider</ShadcnLayoutSider>
-        <ShadcnLayoutContent class="bg-blue-500 h-32">Content</ShadcnLayoutContent>
-      </ShadcnLayoutWrapper>
-      <ShadcnLayoutFooter class="bg-blue-400 h-20">Footer</ShadcnLayoutFooter>
-    </ShadcnLayout>
-    <div class="my-4">Header + (Content + Sider) + Footer</div>
-    <ShadcnLayout :dark="darkMode">
-      <ShadcnLayoutHeader class="bg-blue-100 h-12">Header</ShadcnLayoutHeader>
-      <ShadcnLayoutWrapper>
-        <ShadcnLayoutContent class="bg-blue-500 h-32">Content</ShadcnLayoutContent>
-        <ShadcnLayoutSider class="w-48 bg-blue-100">Sider</ShadcnLayoutSider>
-      </ShadcnLayoutWrapper>
-      <ShadcnLayoutFooter class="bg-blue-400 h-20">Footer</ShadcnLayoutFooter>
-    </ShadcnLayout>
+## 多种布局组合
+
+通过嵌套 Layout 组件，可以实现各种复杂的布局结构。
+
+<CodeRunner title="多种布局组合">
+    <div class="space-y-6">
+        <div>
+            <div class="text-sm font-semibold mb-2 text-gray-700">Header + (Sider + Content) + Footer</div>
+            <ShadcnLayout>
+                <ShadcnLayoutHeader class="bg-sky-300 text-white h-12 flex items-center px-4">Header</ShadcnLayoutHeader>
+                <ShadcnLayout>
+                    <ShadcnLayoutSider class="bg-sky-400 text-white min-h-[120px] flex items-center justify-center" :collapsible="false">Sider</ShadcnLayoutSider>
+                    <ShadcnLayoutContent class="bg-sky-600 text-white flex items-center px-4">Content</ShadcnLayoutContent>
+                </ShadcnLayout>
+                <ShadcnLayoutFooter class="bg-sky-300 text-white h-16 flex items-center px-4">Footer</ShadcnLayoutFooter>
+            </ShadcnLayout>
+        </div>
+        <div>
+            <div class="text-sm font-semibold mb-2 text-gray-700">Header + (Content + Sider) + Footer</div>
+            <ShadcnLayout>
+                <ShadcnLayoutHeader class="bg-sky-300 text-white h-12 flex items-center px-4">Header</ShadcnLayoutHeader>
+                <ShadcnLayout>
+                    <ShadcnLayoutContent class="bg-sky-600 text-white flex items-center px-4">Content</ShadcnLayoutContent>
+                    <ShadcnLayoutSider class="bg-sky-400 text-white min-h-[120px] flex items-center justify-center" :collapsible="false">Sider</ShadcnLayoutSider>
+                </ShadcnLayout>
+                <ShadcnLayoutFooter class="bg-sky-300 text-white h-16 flex items-center px-4">Footer</ShadcnLayoutFooter>
+            </ShadcnLayout>
+        </div>
+    </div>
 </CodeRunner>
 
 ::: details 查看代码
 
 ```vue
 <template>
-<div>Header + Content + Footer</div>
-<ShadcnLayout>
-    <ShadcnLayoutHeader class="bg-blue-100 h-12">Header</ShadcnLayoutHeader>
-    <ShadcnLayoutContent class="bg-blue-500 h-32">Content</ShadcnLayoutContent>
-    <ShadcnLayoutFooter class="bg-blue-400 h-20">Footer</ShadcnLayoutFooter>
-</ShadcnLayout>
-<div>Sider + (Header + Content + Footer)</div>
-<ShadcnLayout>
-    <ShadcnLayoutWrapper>
-        <ShadcnLayoutSider class="w-48 bg-blue-100">Sider</ShadcnLayoutSider>
-        <ShadcnLayoutMain>
-            <ShadcnLayoutHeader class="bg-blue-100 h-12">Header</ShadcnLayoutHeader>
-            <ShadcnLayoutContent class="bg-blue-500 h-32">Content</ShadcnLayoutContent>
-            <ShadcnLayoutFooter class="bg-blue-400 h-20">Footer</ShadcnLayoutFooter>
-        </ShadcnLayoutMain>
-    </ShadcnLayoutWrapper>
-</ShadcnLayout>
-<div>(Header + Content + Footer) + Sider</div>
-<ShadcnLayout>
-    <ShadcnLayoutWrapper>
-        <ShadcnLayoutMain>
-            <ShadcnLayoutHeader class="bg-blue-100 h-12">Header</ShadcnLayoutHeader>
-            <ShadcnLayoutContent class="bg-blue-500 h-32">Content</ShadcnLayoutContent>
-            <ShadcnLayoutFooter class="bg-blue-400 h-20">Footer</ShadcnLayoutFooter>
-        </ShadcnLayoutMain>
-        <ShadcnLayoutSider class="w-48 bg-blue-100">Sider</ShadcnLayoutSider>
-    </ShadcnLayoutWrapper>
-</ShadcnLayout>
-<div>Header + (Sider + Content) + Footer</div>
+<!-- Header + (Sider + Content) + Footer -->
 <ShadcnLayout>
-    <ShadcnLayoutHeader class="bg-blue-100 h-12">Header</ShadcnLayoutHeader>
-    <ShadcnLayoutWrapper>
-        <ShadcnLayoutSider class="w-48 bg-blue-100">Sider</ShadcnLayoutSider>
-        <ShadcnLayoutContent class="bg-blue-500 h-32">Content</ShadcnLayoutContent>
-    </ShadcnLayoutWrapper>
-    <ShadcnLayoutFooter class="bg-blue-400 h-20">Footer</ShadcnLayoutFooter>
+    <ShadcnLayoutHeader>Header</ShadcnLayoutHeader>
+    <ShadcnLayout>
+        <ShadcnLayoutSider :collapsible="false">Sider</ShadcnLayoutSider>
+        <ShadcnLayoutContent>Content</ShadcnLayoutContent>
+    </ShadcnLayout>
+    <ShadcnLayoutFooter>Footer</ShadcnLayoutFooter>
 </ShadcnLayout>
-<div>Header + (Content + Sider) + Footer</div>
+
+<!-- Header + (Content + Sider) + Footer -->
 <ShadcnLayout>
-    <ShadcnLayoutHeader class="bg-blue-100 h-12">Header</ShadcnLayoutHeader>
-        <ShadcnLayoutWrapper>
-            <ShadcnLayoutContent class="bg-blue-500 h-32">Content</ShadcnLayoutContent>
-            <ShadcnLayoutSider class="w-48 bg-blue-100">Sider</ShadcnLayoutSider>
-        </ShadcnLayoutWrapper>
-    <ShadcnLayoutFooter class="bg-blue-400 h-20">Footer</ShadcnLayoutFooter>
+    <ShadcnLayoutHeader>Header</ShadcnLayoutHeader>
+    <ShadcnLayout>
+        <ShadcnLayoutContent>Content</ShadcnLayoutContent>
+        <ShadcnLayoutSider :collapsible="false">Sider</ShadcnLayoutSider>
+    </ShadcnLayout>
+    <ShadcnLayoutFooter>Footer</ShadcnLayoutFooter>
 </ShadcnLayout>
 </template>
 
@@ -181,32 +134,26 @@ title: 布局 (Layout)
 
 :::
 
-## 自定义触发器 (trigger)
+## 可折叠侧边栏
 
-<CodeRunner title="自定义触发器 (trigger)">
-    <ShadcnLayout :dark="darkMode">
-      <ShadcnLayoutWrapper>
-        <ShadcnLayoutSider class="bg-blue-100" collapsible :defaultCollapsed="false" trigger>
-          <div class="space-y-4">
-            <div class="flex items-center space-x-2">
-              <ShadcnIcon icon="Home"/>
-              <span>Home</span>
-            </div>
-          </div>
-          <template #collapsed>
-            <div class="space-y-4">
-              <div class="flex items-center space-x-2">
-                <ShadcnIcon icon="Home"/>
-              </div>
+Sider 支持折叠功能，可以通过内置触发器或自定义触发器来控制折叠状态。
+
+<CodeRunner title="可折叠侧边栏（内置触发器）">
+    <ShadcnLayout>
+        <ShadcnLayoutSider
+            class="bg-sky-400 text-white min-h-[160px]"
+            :collapsible="true"
+            :trigger="true"
+            @on-collapse="(collapsed) => console.log('collapsed:', collapsed)">
+            <div class="flex items-center justify-center h-full">
+                <span>Sider Content</span>
             </div>
-          </template>
         </ShadcnLayoutSider>
-        <ShadcnLayoutMain>
-          <ShadcnLayoutHeader class="bg-blue-100 h-12">Header</ShadcnLayoutHeader>
-          <ShadcnLayoutContent class="bg-blue-500 h-32">Content</ShadcnLayoutContent>
-          <ShadcnLayoutFooter class="bg-blue-400 h-20">Footer</ShadcnLayoutFooter>
-        </ShadcnLayoutMain>
-      </ShadcnLayoutWrapper>
+        <ShadcnLayout>
+            <ShadcnLayoutHeader class="bg-sky-300 text-white h-12 flex items-center px-4">Header</ShadcnLayoutHeader>
+            <ShadcnLayoutContent class="bg-sky-600 text-white flex items-center px-4">Content</ShadcnLayoutContent>
+            <ShadcnLayoutFooter class="bg-sky-300 text-white h-16 flex items-center px-4">Footer</ShadcnLayoutFooter>
+        </ShadcnLayout>
     </ShadcnLayout>
 </CodeRunner>
 
@@ -214,31 +161,74 @@ title: 布局 (Layout)
 
 ```vue
 <template>
-  <ShadcnLayout>
-    <ShadcnLayoutWrapper>
-      <ShadcnLayoutSider class="bg-blue-100" collapsible :defaultCollapsed="false" trigger>
-        <div class="space-y-4">
-          <div class="flex items-center space-x-2">
-            <ShadcnIcon icon="Home"/>
-            <span>Home</span>
-          </div>
-        </div>
+<ShadcnLayout>
+    <ShadcnLayoutSider
+        :collapsible="true"
+        :trigger="true"
+        @on-collapse="handleCollapse">
+        <div>Sider Content</div>
+    </ShadcnLayoutSider>
+    <ShadcnLayout>
+        <ShadcnLayoutHeader>Header</ShadcnLayoutHeader>
+        <ShadcnLayoutContent>Content</ShadcnLayoutContent>
+        <ShadcnLayoutFooter>Footer</ShadcnLayoutFooter>
+    </ShadcnLayout>
+</ShadcnLayout>
+</template>
+
+<script setup lang="ts">
+const handleCollapse = (collapsed: boolean) => {
+    console.log('collapsed:', collapsed);
+};
+</script>
+```
+
+:::
+
+## 自定义折叠内容
+
+通过插槽可以自定义折叠状态下的内容。
+
+<CodeRunner title="自定义折叠内容">
+    <ShadcnLayout>
+        <ShadcnLayoutSider
+            class="bg-sky-400 text-white min-h-[160px]"
+            :collapsible="true"
+            :trigger="true">
+            <template #default>
+                <div class="flex items-center justify-center h-full">完整内容</div>
+            </template>
+            <template #collapsed>
+                <div class="flex items-center justify-center h-full">折</div>
+            </template>
+        </ShadcnLayoutSider>
+        <ShadcnLayout>
+            <ShadcnLayoutHeader class="bg-sky-300 text-white h-12 flex items-center px-4">Header</ShadcnLayoutHeader>
+            <ShadcnLayoutContent class="bg-sky-600 text-white flex items-center px-4">Content</ShadcnLayoutContent>
+            <ShadcnLayoutFooter class="bg-sky-300 text-white h-16 flex items-center px-4">Footer</ShadcnLayoutFooter>
+        </ShadcnLayout>
+    </ShadcnLayout>
+</CodeRunner>
 
+::: details 查看代码
+
+```vue
+<template>
+<ShadcnLayout>
+    <ShadcnLayoutSider :collapsible="true" :trigger="true">
+        <template #default>
+            <div>完整内容</div>
+        </template>
         <template #collapsed>
-          <div class="space-y-4">
-            <div class="flex items-center space-x-2">
-              <ShadcnIcon icon="Home"/>
-            </div>
-          </div>
+            <div>折</div>
         </template>
-      </ShadcnLayoutSider>
-      <ShadcnLayoutMain>
-        <ShadcnLayoutHeader class="bg-blue-100 h-16">Header</ShadcnLayoutHeader>
-        <ShadcnLayoutContent class="bg-blue-500 flex-1">Content</ShadcnLayoutContent>
-        <ShadcnLayoutFooter class="bg-blue-400 h-24">Footer</ShadcnLayoutFooter>
-      </ShadcnLayoutMain>
-    </ShadcnLayoutWrapper>
-  </ShadcnLayout>
+    </ShadcnLayoutSider>
+    <ShadcnLayout>
+        <ShadcnLayoutHeader>Header</ShadcnLayoutHeader>
+        <ShadcnLayoutContent>Content</ShadcnLayoutContent>
+        <ShadcnLayoutFooter>Footer</ShadcnLayoutFooter>
+    </ShadcnLayout>
+</ShadcnLayout>
 </template>
 
 <script setup lang="ts">
@@ -247,34 +237,47 @@ title: 布局 (Layout)
 
 :::
 
-## 布局 (Layout) 属性
+## Sider Props
 
-<ApiTable title="布局 (Layout) 属性"
+<ApiTable title="Sider Props"
     :headers="['属性', '描述', '类型', '默认值']"
     :columns="[
-        ['width', '布局侧边器的宽度', 'number | string', '200'],
-        ['collapsedWidth', '折叠时侧边栏的宽度', 'number | string', '80'],
-        ['collapsible', '布局侧边器是否可折叠', 'boolean', 'false'],
-        ['defaultCollapsed', '布局侧边栏的默认状态', 'boolean', 'false'],
-        ['trigger', '布局侧边栏的触发器', 'boolean', 'false'],
+        ['width', '侧边栏宽度', 'string', '\'200\''],
+        ['collapsedWidth', '折叠时侧边栏宽度', 'string', '\'80\''],
+        ['collapsible', '是否可折叠', 'boolean', 'true'],
+        ['defaultCollapsed', '默认折叠状态', 'boolean', 'false'],
+        ['trigger', '是否显示内置触发器', 'boolean', 'false'],
     ]">
 </ApiTable>
 
-## 布局 (Layout) 事件
+## Sider Events
 
-<ApiTable title="布局 (Layout) 事件"
+<ApiTable title="Sider Events"
     :headers="['事件', '描述', '回调参数']"
     :columns="[
-        ['on-collapse', '当吃侧边栏折叠时发出', '-'],
+        ['on-collapse', '折叠状态改变时触发', 'collapsed: boolean'],
+    ]">
+</ApiTable>
+
+## Sider Slots
+
+<ApiTable title="Sider Slots"
+    :headers="['插槽', '描述']"
+    :columns="[
+        ['default', '展开状态下的内容'],
+        ['collapsed', '折叠状态下的内容'],
+        ['trigger', '自定义触发器，参数：{ collapsed: boolean, toggle: () => void }'],
     ]">
 </ApiTable>
 
-## 布局 (Layout) 插槽
+## Sider Methods
 
-<ApiTable title="布局 (Layout) 插槽"
-    :headers="['插槽', '描述']" 
+<ApiTable title="Sider Methods"
+    :headers="['方法', '描述', '参数']"
     :columns="[
-        ['trigger', '自定义触发器'],
+        ['collapse', '折叠侧边栏', '-'],
+        ['expand', '展开侧边栏', '-'],
+        ['toggle', '切换折叠状态', '-'],
     ]">
 </ApiTable>
 
diff --git a/package.json b/package.json
index 49a6ff79..56835546 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,7 @@
   "author": "devlive-community",
   "homepage": "https://view-shadcn-ui.devlive.org",
   "private": false,
-  "version": "2025.1.5",
+  "version": "2026.0.0",
   "license": "MIT",
   "main": "./dist/view-shadcn.umd.ts",
   "module": "./dist/view-shadcn.es.ts",
diff --git a/packages/index.ts b/packages/index.ts
index 64967b21..43e6d116 100644
--- a/packages/index.ts
+++ b/packages/index.ts
@@ -29,7 +29,7 @@ import { ShadcnSelect, ShadcnSelectGroup, ShadcnSelectOption } from '@/ui/select
 import { ShadcnRate } from '@/ui/rate'
 import { ShadcnTab, ShadcnTabItem } from '@/ui/tab'
 import { ShadcnSkeleton, ShadcnSkeletonItem } from '@/ui/skeleton'
-import { ShadcnLayout, ShadcnLayoutContent, ShadcnLayoutFooter, ShadcnLayoutHeader, ShadcnLayoutMain, ShadcnLayoutSider, ShadcnLayoutWrapper } from '@/ui/layout'
+import { ShadcnLayout, ShadcnLayoutContent, ShadcnLayoutFooter, ShadcnLayoutHeader, ShadcnLayoutSider } from '@/ui/layout'
 import { ShadcnPagination } from '@/ui/pagination'
 import { ShadcnDrawer } from '@/ui/drawer'
 import { ShadcnMenu, ShadcnMenuGroup, ShadcnMenuItem, ShadcnMenuSub } from '@/ui/menu'
@@ -110,7 +110,7 @@ let components = [
     ShadcnRate,
     ShadcnTab, ShadcnTabItem,
     ShadcnSkeleton, ShadcnSkeletonItem,
-    ShadcnLayout, ShadcnLayoutHeader, ShadcnLayoutContent, ShadcnLayoutSider, ShadcnLayoutFooter, ShadcnLayoutWrapper, ShadcnLayoutMain,
+    ShadcnLayout, ShadcnLayoutHeader, ShadcnLayoutContent, ShadcnLayoutSider, ShadcnLayoutFooter,
     ShadcnPagination,
     ShadcnDrawer,
     ShadcnMenu, ShadcnMenuItem, ShadcnMenuSub, ShadcnMenuGroup,
@@ -225,7 +225,7 @@ export { ShadcnSelect, ShadcnSelectOption, ShadcnSelectGroup } from '@/ui/select
 export { ShadcnRate } from '@/ui/rate'
 export { ShadcnTab, ShadcnTabItem } from '@/ui/tab'
 export { ShadcnSkeleton, ShadcnSkeletonItem } from '@/ui/skeleton'
-export { ShadcnLayout, ShadcnLayoutContent, ShadcnLayoutFooter, ShadcnLayoutHeader, ShadcnLayoutMain, ShadcnLayoutSider, ShadcnLayoutWrapper } from '@/ui/layout'
+export { ShadcnLayout, ShadcnLayoutContent, ShadcnLayoutFooter, ShadcnLayoutHeader, ShadcnLayoutSider } from '@/ui/layout'
 export { ShadcnPagination } from '@/ui/pagination'
 export { ShadcnDrawer } from '@/ui/drawer'
 export { ShadcnMenu, ShadcnMenuItem, ShadcnMenuSub, ShadcnMenuGroup } from '@/ui/menu'
diff --git a/playground/package.json b/playground/package.json
index 26ad9757..4b6bb983 100644
--- a/playground/package.json
+++ b/playground/package.json
@@ -1,7 +1,7 @@
 {
   "name": "view-shadcn-ui-playground",
   "private": true,
-  "version": "2025.1.4",
+  "version": "2026.0.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
diff --git a/src/App.vue b/src/App.vue
index 2868f484..fbe67bee 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,68 +1,98 @@
 <template>
-  <div :class="['min-h-screen px-6 pb-6', isDark ? 'bg-gray-900' : 'bg-white']">
-    <ShadcnButton @click="isDark = !isDark" :dark="isDark" class="mt-2">
-      切换暗黑模式
-    </ShadcnButton>
+  <div class="border border-gray-300 bg-gray-50 relative rounded overflow-hidden p-5 text-white text-center space-y-5">
+    <ShadcnLayout>
+      <ShadcnLayoutHeader class="bg-sky-300 text-white">Header</ShadcnLayoutHeader>
+      <ShadcnLayoutContent class="bg-sky-600 min-h-[120px] leading-[120px]">Content</ShadcnLayoutContent>
+      <ShadcnLayoutFooter class="bg-sky-300 text-white">Footer</ShadcnLayoutFooter>
+    </ShadcnLayout>
 
-    <div class="mt-6">
-      <h3 :class="['text-lg font-semibold mb-4', isDark ? 'text-white' : 'text-gray-900']">Select 搜索功能</h3>
-      <div class="p-6 rounded-lg bg-gradient-to-r from-indigo-400 to-purple-400">
-        <div class="p-8 rounded-lg bg-white/50">
-          <div class="space-y-4">
-            <div>
-              <label :class="['block text-sm font-medium mb-2', isDark ? 'text-gray-200' : 'text-gray-700']">普通搜索选择器</label>
-              <ShadcnSelect v-model="selectedValue1" search placeholder="请选择" :dark="isDark">
-                <template #options>
-                  <ShadcnSelectOption v-for="city in cities" :key="city.value" :value="city.value" :label="city.label" :dark="isDark" />
-                </template>
-              </ShadcnSelect>
-            </div>
-            <div>
-              <label :class="['block text-sm font-medium mb-2', isDark ? 'text-gray-200' : 'text-gray-700']">液态玻璃搜索选择器</label>
-              <ShadcnSelect v-model="selectedValue2" search glass placeholder="请选择" :dark="isDark">
-                <template #options>
-                  <ShadcnSelectOption v-for="city in cities" :key="city.value" :value="city.value" :label="city.label" :dark="isDark" glass />
-                </template>
-              </ShadcnSelect>
-            </div>
-            <div>
-              <label :class="['block text-sm font-medium mb-2', isDark ? 'text-gray-200' : 'text-gray-700']">多选搜索选择器</label>
-              <ShadcnSelect v-model="selectedValue3" search multiple glass placeholder="请选择多个城市" :dark="isDark">
-                <template #options>
-                  <ShadcnSelectOption v-for="city in cities" :key="city.value" :value="city.value" :label="city.label" :dark="isDark" glass />
-                </template>
-              </ShadcnSelect>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
+    <ShadcnLayout>
+      <ShadcnLayoutHeader class="bg-sky-300 text-white">Header</ShadcnLayoutHeader>
+      <ShadcnLayout>
+        <ShadcnLayoutSider class="bg-sky-400 min-h-[120px] leading-[120px]" :collapsible="false">Sider</ShadcnLayoutSider>
+        <ShadcnLayoutContent class="bg-sky-600 min-h-[120px] leading-[120px]">Content</ShadcnLayoutContent>
+      </ShadcnLayout>
+      <ShadcnLayoutFooter class="bg-sky-300 text-white">Footer</ShadcnLayoutFooter>
+    </ShadcnLayout>
 
+    <ShadcnLayout>
+      <ShadcnLayoutHeader class="bg-sky-300 text-white">Header</ShadcnLayoutHeader>
+      <ShadcnLayout>
+        <ShadcnLayoutContent class="bg-sky-600 min-h-[120px] leading-[120px]">Content</ShadcnLayoutContent>
+        <ShadcnLayoutSider class="bg-sky-400 min-h-[120px] leading-[120px]" :collapsible="false">Sider</ShadcnLayoutSider>
+      </ShadcnLayout>
+      <ShadcnLayoutFooter class="bg-sky-300 text-white">Footer</ShadcnLayoutFooter>
+    </ShadcnLayout>
+
+    <ShadcnLayout>
+      <ShadcnLayoutSider class="bg-sky-400 min-h-[120px] leading-[120px]" :collapsible="false">Sider</ShadcnLayoutSider>
+      <ShadcnLayout>
+        <ShadcnLayoutHeader class="bg-sky-300 text-white">Header</ShadcnLayoutHeader>
+        <ShadcnLayoutContent class="bg-sky-600 min-h-[120px] leading-[120px]">Content</ShadcnLayoutContent>
+        <ShadcnLayoutFooter class="bg-sky-300 text-white">Footer</ShadcnLayoutFooter>
+      </ShadcnLayout>
+    </ShadcnLayout>
+
+    <div class="text-gray-800 text-left font-semibold mb-2">可折叠侧边栏示例（带触发器）</div>
+    <ShadcnLayout>
+      <ShadcnLayoutSider
+        class="bg-sky-400 min-h-[120px] flex items-center justify-center"
+        :collapsible="true"
+        :trigger="true"
+        @on-collapse="handleCollapse">
+        <div>Sider</div>
+      </ShadcnLayoutSider>
+      <ShadcnLayout>
+        <ShadcnLayoutHeader class="bg-sky-300 text-white">Header</ShadcnLayoutHeader>
+        <ShadcnLayoutContent class="bg-sky-600 min-h-[120px] leading-[120px]">Content</ShadcnLayoutContent>
+        <ShadcnLayoutFooter class="bg-sky-300 text-white">Footer</ShadcnLayoutFooter>
+      </ShadcnLayout>
+    </ShadcnLayout>
+
+    <div class="text-gray-800 text-left font-semibold mb-2">可折叠侧边栏示例（自定义触发器）</div>
+    <ShadcnLayout>
+      <ShadcnLayoutSider
+        ref="siderRef"
+        class="bg-sky-400 min-h-[120px]"
+        :collapsible="true"
+        :trigger="false"
+        @on-collapse="handleCollapse">
+        <template #default>
+          <div class="flex items-center justify-center h-full">Sider Content</div>
+        </template>
+        <template #collapsed>
+          <div class="flex items-center justify-center h-full">S</div>
+        </template>
+      </ShadcnLayoutSider>
+      <ShadcnLayout>
+        <ShadcnLayoutHeader class="bg-sky-300 text-white flex items-center justify-between px-4">
+          <span>Header</span>
+          <button
+            @click="toggleSider"
+            class="px-3 py-1 bg-sky-500 hover:bg-sky-600 rounded text-white text-sm">
+            Toggle Sider
+          </button>
+        </ShadcnLayoutHeader>
+        <ShadcnLayoutContent class="bg-sky-600 min-h-[120px] leading-[120px]">Content</ShadcnLayoutContent>
+        <ShadcnLayoutFooter class="bg-sky-300 text-white">Footer</ShadcnLayoutFooter>
+      </ShadcnLayout>
+    </ShadcnLayout>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
-import { ShadcnButton } from "@/ui/button"
-import { ShadcnSelect, ShadcnSelectOption } from "@/ui/select"
+import { ref } from 'vue';
+import { ShadcnLayout, ShadcnLayoutContent, ShadcnLayoutFooter, ShadcnLayoutHeader, ShadcnLayoutSider } from "@/ui/layout";
+
+const siderRef = ref<InstanceType<typeof ShadcnLayoutSider> | null>(null);
 
-const isDark = ref(false)
-const selectedValue1 = ref('')
-const selectedValue2 = ref('')
-const selectedValue3 = ref([])
+const handleCollapse = (collapsed: boolean) => {
+  console.log('Sider collapsed:', collapsed);
+};
 
-const cities = ref([
-  { value: 'beijing', label: '北京' },
-  { value: 'shanghai', label: '上海' },
-  { value: 'guangzhou', label: '广州' },
-  { value: 'shenzhen', label: '深圳' },
-  { value: 'hangzhou', label: '杭州' },
-  { value: 'nanjing', label: '南京' },
-  { value: 'chengdu', label: '成都' },
-  { value: 'chongqing', label: '重庆' },
-  { value: 'wuhan', label: '武汉' },
-  { value: 'xian', label: '西安' },
-  { value: 'tianjin', label: '天津' },
-  { value: 'suzhou', label: '苏州' }
-])
+const toggleSider = () => {
+  if (siderRef.value) {
+    siderRef.value.toggle();
+  }
+};
 </script>
diff --git a/src/ui/layout/ShadcnLayout.vue b/src/ui/layout/ShadcnLayout.vue
index be9f8528..bd8bfa31 100644
--- a/src/ui/layout/ShadcnLayout.vue
+++ b/src/ui/layout/ShadcnLayout.vue
@@ -1,47 +1,26 @@
 <template>
-  <div :class="['flex flex-col', dark ? 'bg-gray-900' : 'bg-white']">
+  <div :class="['flex flex-1', hasSider ? 'flex-row' : 'flex-col']">
     <slot></slot>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, provide, ref } from 'vue'
+import { onMounted, ref, useSlots } from 'vue'
 
-interface Props
-{
-  dark?: boolean
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  dark: false
-})
-
-const isInLayout = ref(true)
+const slots = useSlots()
 const hasSider = ref(false)
-const siderPosition = ref<'left' | 'content'>('left')
-const dark = computed(() => props.dark)
-
-provide('isInLayout', isInLayout)
-provide('hasSider', hasSider)
-provide('siderPosition', siderPosition)
-provide('dark', dark)
 
-const updateSiderStatus = () => {
-  const sider = document.querySelector('.shadcn-layout-sider')
-  hasSider.value = !!sider
+const findSider = () => {
+  const children = slots.default?.()
+  if (!children) return false
 
-  if (sider) {
-    const content = document.querySelector('.shadcn-layout-content')
-    if (content?.contains(sider)) {
-      siderPosition.value = 'content'
-    }
-    else {
-      siderPosition.value = 'left'
-    }
-  }
+  return children.some(child => {
+    const type = child.type as any
+    return type?.name === 'ShadcnLayoutSider' || type?.__name === 'ShadcnLayoutSider'
+  })
 }
 
 onMounted(() => {
-  updateSiderStatus()
+  hasSider.value = findSider()
 })
 </script>
diff --git a/src/ui/layout/ShadcnLayoutContent.vue b/src/ui/layout/ShadcnLayoutContent.vue
index cad26812..09e45d75 100644
--- a/src/ui/layout/ShadcnLayoutContent.vue
+++ b/src/ui/layout/ShadcnLayoutContent.vue
@@ -1,16 +1,8 @@
 <template>
-  <div v-if="isInLayout" :class="['shadcn-layout-content w-full', dark ? 'bg-gray-900 text-gray-100' : 'bg-white']">
+  <div class="shadcn-layout-content flex flex-col flex-1">
     <slot/>
   </div>
 </template>
 
 <script setup lang="ts">
-import { inject } from 'vue'
-
-const isInLayout = inject('isInLayout', false)
-const dark = inject('dark', false)
-
-if (!isInLayout) {
-  console.warn('ShadcnLayoutContent must be placed inside ShadcnLayout.')
-}
 </script>
diff --git a/src/ui/layout/ShadcnLayoutFooter.vue b/src/ui/layout/ShadcnLayoutFooter.vue
index 1cf4dfcf..3e20eb6f 100644
--- a/src/ui/layout/ShadcnLayoutFooter.vue
+++ b/src/ui/layout/ShadcnLayoutFooter.vue
@@ -1,16 +1,8 @@
 <template>
-  <div v-if="isInLayout" :class="['shadcn-layout-footer order-3 w-full', dark ? 'bg-gray-800 border-t border-gray-700 text-gray-100' : 'bg-white border-t border-gray-200']">
+  <div class="shadcn-layout-footer w-full">
     <slot/>
   </div>
 </template>
 
 <script setup lang="ts">
-import { inject } from 'vue'
-
-const isInLayout = inject('isInLayout', false)
-const dark = inject('dark', false)
-
-if (!isInLayout) {
-  console.warn('ShadcnLayoutFooter must be placed inside ShadcnLayout.')
-}
 </script>
diff --git a/src/ui/layout/ShadcnLayoutHeader.vue b/src/ui/layout/ShadcnLayoutHeader.vue
index 9ed50037..3af12ab8 100644
--- a/src/ui/layout/ShadcnLayoutHeader.vue
+++ b/src/ui/layout/ShadcnLayoutHeader.vue
@@ -1,16 +1,8 @@
 <template>
-  <div v-if="isInLayout" :class="['shadcn-layout-header w-full', dark ? 'bg-gray-800 border-b border-gray-700' : 'bg-white border-b border-gray-200']">
+  <div class="shadcn-layout-header w-full">
     <slot/>
   </div>
 </template>
 
 <script setup lang="ts">
-import { inject } from 'vue'
-
-const isInLayout = inject('isInLayout', false)
-const dark = inject('dark', false)
-
-if (!isInLayout) {
-  console.error('ShadcnLayoutHeader must be used inside a ShadcnLayout component.')
-}
 </script>
diff --git a/src/ui/layout/ShadcnLayoutMain.vue b/src/ui/layout/ShadcnLayoutMain.vue
deleted file mode 100644
index 14d4fe71..00000000
--- a/src/ui/layout/ShadcnLayoutMain.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<template>
-  <div v-if="isInLayout" class="shadcn-layout-main flex flex-col flex-1">
-    <slot/>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { inject } from 'vue'
-
-const isInLayout = inject('isInLayout', false)
-
-if (!isInLayout) {
-  console.warn('ShadcnLayoutMain must be placed inside ShadcnLayout.')
-}
-</script>
diff --git a/src/ui/layout/ShadcnLayoutSider.vue b/src/ui/layout/ShadcnLayoutSider.vue
index c49f32dc..9f057af2 100644
--- a/src/ui/layout/ShadcnLayoutSider.vue
+++ b/src/ui/layout/ShadcnLayoutSider.vue
@@ -1,38 +1,27 @@
 <template>
-  <div v-if="isInLayout"
-       :class="['shadcn-layout-sider relative flex flex-col transition-all duration-300 ease-in-out', dark ? 'bg-gray-800 border-r border-gray-700' : 'bg-gray-50 border-r border-gray-200']"
+  <div class="shadcn-layout-sider relative flex flex-col transition-all duration-300 ease-in-out"
        :style="{ width: collapsed ? `${collapsedWidth}px` : `${width}px` }">
-    <!-- Sider content wrapper -->
-    <div class="flex-1 overflow-hidden">
-      <div class="h-full" :class="{ 'px-4 py-2': !collapsed }">
-        <!-- Expanded state displays normal content -->
-        <div v-show="!collapsed" class="transition-opacity duration-300">
-          <slot/>
-        </div>
+    <div v-show="!collapsed" class="flex-1 transition-opacity duration-300">
+      <slot/>
+    </div>
 
-        <!-- Show icon content in collapsed state -->
-        <div v-show="collapsed" class="transition-opacity duration-300">
-          <slot name="collapsed">
-            <!-- Content when collapsed by default -->
-            <div class="flex flex-col items-center py-2 space-y-4">
-              <slot name="icon"/>
-            </div>
-          </slot>
+    <div v-show="collapsed" class="flex-1 transition-opacity duration-300">
+      <slot name="collapsed">
+        <div class="flex flex-col items-center py-2 space-y-4">
+          <slot name="icon"/>
         </div>
-      </div>
+      </slot>
     </div>
 
-    <!-- Trigger -->
     <div v-if="collapsible && trigger"
-         :class="['absolute top-1/2 -right-3 w-6 h-6 flex items-center justify-center border rounded-full cursor-pointer transform -translate-y-1/2 shadow-md', dark ? 'bg-gray-700 border-gray-600 hover:bg-gray-600' : 'bg-white border-gray-200 hover:bg-gray-50']"
+         class="absolute top-1/2 -right-3 w-6 h-6 flex items-center justify-center border rounded-full cursor-pointer transform -translate-y-1/2 shadow-md bg-white border-gray-200 hover:bg-gray-50"
          @click="toggleCollapse">
-      <div :class="['flex items-center', dark ? 'text-gray-300' : 'text-gray-500']">
-        <ShadcnIcon v-if="collapsed" :dark="dark" class="h-4 w-4" icon="ChevronRight"/>
-        <ShadcnIcon v-else :dark="dark" class="h-4 w-4" icon="ChevronLeft"/>
+      <div class="flex items-center text-gray-500">
+        <ShadcnIcon v-if="collapsed" class="h-4 w-4" icon="ChevronRight"/>
+        <ShadcnIcon v-else class="h-4 w-4" icon="ChevronLeft"/>
       </div>
     </div>
 
-    <!-- Custom trigger -->
     <slot name="trigger" v-if="collapsible && !trigger"
           :collapsed="collapsed"
           :toggle="toggleCollapse"/>
@@ -40,7 +29,7 @@
 </template>
 
 <script setup lang="ts">
-import { inject, ref } from 'vue'
+import { ref } from 'vue'
 import { ShadcnIcon } from '@/ui/icon'
 
 interface Props
@@ -52,6 +41,10 @@ interface Props
   trigger?: boolean
 }
 
+defineOptions({
+  name: 'ShadcnLayoutSider'
+})
+
 const emit = defineEmits(['on-collapse'])
 
 const props = withDefaults(defineProps<Props>(), {
@@ -62,8 +55,6 @@ const props = withDefaults(defineProps<Props>(), {
   trigger: false
 })
 
-const isInLayout = inject('isInLayout', false)
-const dark = inject('dark', false)
 const collapsed = ref(props.defaultCollapsed)
 
 const toggleCollapse = () => {
diff --git a/src/ui/layout/ShadcnLayoutWrapper.vue b/src/ui/layout/ShadcnLayoutWrapper.vue
deleted file mode 100644
index 15aa0678..00000000
--- a/src/ui/layout/ShadcnLayoutWrapper.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<template>
-  <div v-if="isInLayout" class="shadcn-layout-wrapper order-2 flex flex-1">
-    <slot/>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { inject } from 'vue'
-
-const isInLayout = inject('isInLayout', false)
-
-if (!isInLayout) {
-  console.warn('ShadcnLayoutContainer must be placed inside ShadcnLayout.')
-}
-</script>
diff --git a/src/ui/layout/index.ts b/src/ui/layout/index.ts
index bf4cecae..5b73dab6 100644
--- a/src/ui/layout/index.ts
+++ b/src/ui/layout/index.ts
@@ -3,5 +3,3 @@ export { default as ShadcnLayoutHeader } from './ShadcnLayoutHeader.vue'
 export { default as ShadcnLayoutContent } from './ShadcnLayoutContent.vue'
 export { default as ShadcnLayoutSider } from './ShadcnLayoutSider.vue'
 export { default as ShadcnLayoutFooter } from './ShadcnLayoutFooter.vue'
-export { default as ShadcnLayoutWrapper } from './ShadcnLayoutWrapper.vue'
-export { default as ShadcnLayoutMain } from './ShadcnLayoutMain.vue'
diff --git a/types/view-shadcn.d.ts b/types/view-shadcn.d.ts
index b97aa287..be7f3099 100644
--- a/types/view-shadcn.d.ts
+++ b/types/view-shadcn.d.ts
@@ -38,8 +38,6 @@ declare module 'view-shadcn-ui'
     export const ShadcnLayoutContent: typeof import('@/ui/layout/content').default
     export const ShadcnLayoutSider: typeof import('@/ui/layout/sider').default
     export const ShadcnLayoutFooter: typeof import('@/ui/layout/footer').default
-    export const ShadcnLayoutWrapper: typeof import('@/ui/layout/wrapper').default
-    export const ShadcnLayoutMain: typeof import('@/ui/layout/main').default
     export const ShadcnPagination: typeof import('@/ui/pagination').default
     export const ShadcnDrawer: typeof import('@/ui/drawer').default
     export const ShadcnMenu: typeof import('@/ui/menu').default