From e4a80fc8388293339b6e3fc76f522a3346060348 Mon Sep 17 00:00:00 2001
From: qianmoQ <shicheng@devlive.org>
Date: Fri, 10 Jan 2025 22:33:51 +0800
Subject: [PATCH 1/5] =?UTF-8?q?=E7=BB=84=E4=BB=B6(=E6=A0=91):=20=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8D=E4=BC=A0=E9=80=92=20v-model=20=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E6=B8=B2=E6=9F=93=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/.vitepress/config.js      |   2 +-
 docs/components/view/tree.md   | 224 ++++++++-------------------------
 src/App.vue                    |  46 ++++---
 src/ui/tree/ShadcnTree.vue     |  12 +-
 src/ui/tree/ShadcnTreeNode.vue |  22 +++-
 5 files changed, 105 insertions(+), 201 deletions(-)

diff --git a/docs/.vitepress/config.js b/docs/.vitepress/config.js
index c0d5bf0c..48cadf3a 100644
--- a/docs/.vitepress/config.js
+++ b/docs/.vitepress/config.js
@@ -184,7 +184,7 @@ export default {
                         {text: 'Trend', link: 'view/trend', icon: '/components/view/trend.svg', version: '2024.2.0'},
                         {text: 'Exception', link: 'view/exception', icon: '/components/view/exception.svg', version: '2024.2.0'},
                         {text: 'Tag', link: 'view/tag', icon: '/components/view/tag.svg', version: '2024.2.0'},
-                        {text: 'Tree', link: 'view/tree', icon: '/components/view/tree.svg', version: '2024.3.0'},
+                        {text: '树 (Tree)', link: 'view/tree', icon: '/components/view/tree.svg', version: '2024.3.0'},
                         {text: 'Hover Card', link: 'view/hover-card', icon: '/components/view/hover-card.svg', version: '2024.4.0'},
                         {text: 'Logger', link: 'view/logger', icon: '/components/view/logger.svg', version: '2024.5.1'},
                         {text: 'Scrollbar', link: 'view/scrollbar', icon: '/components/view/scrollbar.svg', version: '2024.5.1'},
diff --git a/docs/components/view/tree.md b/docs/components/view/tree.md
index 8677fd61..22ca9ff1 100644
--- a/docs/components/view/tree.md
+++ b/docs/components/view/tree.md
@@ -1,17 +1,19 @@
 ---
-title: Shadcn Tree
+title: 树 (Tree)
 ---
 
 # 介绍
 
-This document is mainly used to describe some features and usage of the ShadcnTree component.
+<br />
+
+本文档主要用于描述 `ShadcnTree` 组件的一些特性和用法。
 
 ## 用法
 
 ::: raw
 
 <CodeRunner title="用法">
-    Value: {{ basicValue }}
+    值: {{ basicValue }}
     <ShadcnTree v-model="basicValue"
                 :data="data"
                 @on-expand="onExpand"
@@ -26,52 +28,16 @@ This document is mainly used to describe some features and usage of the ShadcnTr
 <template>
   <ShadcnTree v-model="value" :data="data"/>
 </template>
-
-<script setup>
-import { ref } from "vue"
-const value = ref([])
-const data = [
-    {
-      value: 1,
-      label: 'Parent Node 1',
-      children: [
-        {value: 2, label: 'Child Node 1.1'},
-        {
-          value: 3,
-          label: 'Child Node 1.2',
-          children: [
-            {value: 4, label: 'Child Node 1.2.1'}
-          ]
-        }
-      ]
-    },
-    {
-      value: 5,
-      label: 'Parent Node 2',
-      children: [
-        {value: 6, label: 'Child Node 2.1'}
-      ]
-    }
-]
-
-const onExpand = (node) => {
-console.log('Expand Node:', node)
-}
-
-const onNodeClick = (node) => {
-console.log('Click Node:', node)
-}
-</script>
 ```
 
 :::
 
-## Multiple
+## 多选 (multiple)
 
 ::: raw
 
-<CodeRunner title="Multiple">
-    Value: {{ multipleValue }}
+<CodeRunner title="多选 (multiple)">
+    值: {{ multipleValue }}
     <ShadcnTree v-model="multipleValue" multiple :data="data"/>
 </CodeRunner>
 
@@ -83,44 +49,16 @@ console.log('Click Node:', node)
 <template>
   <ShadcnTree v-model="value" multiple :data="data"/>
 </template>
-
-<script setup>
-import { ref } from "vue"
-const value = ref([])
-const data = [
-    {
-      value: 1,
-      label: 'Parent Node 1',
-      children: [
-        {value: 2, label: 'Child Node 1.1'},
-        {
-          value: 3,
-          label: 'Child Node 1.2',
-          children: [
-            {value: 4, label: 'Child Node 1.2.1'}
-          ]
-        }
-      ]
-    },
-    {
-      value: 5,
-      label: 'Parent Node 2',
-      children: [
-        {value: 6, label: 'Child Node 2.1'}
-      ]
-    }
-  ]
-</script>
 ```
 
 :::
 
-## Checkable
+## 选择框 (checkable)
 
 ::: raw
 
-<CodeRunner title="Checkable">
-    Value: {{ checkableValue }}
+<CodeRunner title="选择框 (checkable)">
+    值: {{ checkableValue }}
     <ShadcnTree v-model="checkableValue" multiple checkable :data="data"/>
 </CodeRunner>
 
@@ -132,44 +70,16 @@ const data = [
 <template>
   <ShadcnTree v-model="value" multiple checkable :data="data"/>
 </template>
-
-<script setup>
-import { ref } from "vue"
-const value = ref([])
-const data = [
-    {
-      value: 1,
-      label: 'Parent Node 1',
-      children: [
-        {value: 2, label: 'Child Node 1.1'},
-        {
-          value: 3,
-          label: 'Child Node 1.2',
-          children: [
-            {value: 4, label: 'Child Node 1.2.1'}
-          ]
-        }
-      ]
-    },
-    {
-      value: 5,
-      label: 'Parent Node 2',
-      children: [
-        {value: 6, label: 'Child Node 2.1'}
-      ]
-    }
-  ]
-</script>
 ```
 
 :::
 
-## Cascade
+## 级联选择 (cascade)
 
 ::: raw
 
-<CodeRunner title="Cascade">
-    Value: {{ cascadeValue }}
+<CodeRunner title="级联选择 (cascade)">
+    值: {{ cascadeValue }}
     <ShadcnTree v-model="cascadeValue" checkable cascade :data="data"/>
 </CodeRunner>
 
@@ -181,44 +91,16 @@ const data = [
 <template>
   <ShadcnTree v-model="value" cascade checkable :data="data"/>
 </template>
-
-<script setup>
-import { ref } from "vue"
-const value = ref([])
-const data = [
-    {
-      value: 1,
-      label: 'Parent Node 1',
-      children: [
-        {value: 2, label: 'Child Node 1.1'},
-        {
-          value: 3,
-          label: 'Child Node 1.2',
-          children: [
-            {value: 4, label: 'Child Node 1.2.1'}
-          ]
-        }
-      ]
-    },
-    {
-      value: 5,
-      label: 'Parent Node 2',
-      children: [
-        {value: 6, label: 'Child Node 2.1'}
-      ]
-    }
-  ]
-</script>
 ```
 
 :::
 
-## Lazy Data
+## 懒加载 (lazy)
 
 ::: raw
 
-<CodeRunner title="Lazy Data">
-    Value: {{ lazyValue }}
+<CodeRunner title="懒加载 (lazy)">
+    值: {{ lazyValue }}
     <ShadcnTree v-model="lazyValue" checkable cascade :data="lazyData" :loadData="loadNodeData"/>
 </CodeRunner>
 
@@ -283,7 +165,7 @@ const loadNodeData = (item: any, callback: (children: any[]) => void) => {
 ::: raw
 
 <CodeRunner title="禁用 (disabled)">
-    Value: {{ disabledValue }}
+    值: {{ disabledValue }}
     <ShadcnTree v-model="disabledValue" :data="disabledData"/>
 </CodeRunner>
 
@@ -328,12 +210,12 @@ const data = reactive([
 
 :::
 
-## Show Line
+## 显示线 (show-line)
 
 ::: raw
 
-<CodeRunner title="Show Line">
-    Value: {{ showLineValue }}
+<CodeRunner title="显示线 (show-line)">
+    值: {{ basicValue }}
     <ShadcnTree v-model="basicValue" show-line checkable :data="data"/>
 </CodeRunner>
 
@@ -349,12 +231,12 @@ const data = reactive([
 
 :::
 
-## Label Slot
+## 自定义 Label 插槽
 
 ::: raw
 
-<CodeRunner title="Label Slot">
-      Value: {{ customValue }}
+<CodeRunner title="自定义 Label 插槽">
+      值: {{ customValue }}
       <ShadcnTree v-model="customValue"
                   checkable
                   cascade
@@ -418,11 +300,11 @@ const data = [
 
 :::
 
-## Expand & Collapse Slot
+## 自定义 Expand/Collapse 插槽
 
 ::: raw
 
-<CodeRunner title="Expand & Collapse Slot">
+<CodeRunner title="自定义 Expand/Collapse 插槽">
     <ShadcnTree v-model="value" :data="data">
         <template #expand>O</template>
         <template #collapse>C</template>
@@ -472,52 +354,52 @@ const data = [
 
 :::
 
-## Props
+## 树 (Tree) 属性
 
-<ApiTable title="Tree Props"
+<ApiTable title="树 (Tree) 属性"
     :headers="['属性', '描述', '类型', '默认值']"
     :columns="[
-        ['modelValue', 'Tree value', 'array', '\[\]'],
-        ['data', 'Tree data', 'array', '\[\]'],
-        ['multiple', 'Multiple mode', 'boolean', 'false'],
-        ['checkable', 'Checkable mode', 'boolean', 'false'],
-        ['cascade', 'Cascade mode, only works when checkable is true, if cascade is true, checkable become true, single mode is inworked', 'boolean', 'false'],
-        ['showLine', 'Show line', 'boolean', 'false'],
-        ['loadData', 'Load data function, only works when <strong>item.isLeaf</strong> is <strong>false</strong>', 'function', 'undefined'],
+        ['modelValue', '当前选择的值', 'array', '\[\]'],
+        ['data', '树的结构数据', 'array', '\[\]'],
+        ['multiple', '多选模式', 'boolean', 'false'],
+        ['checkable', '选择框模式', 'boolean', 'false'],
+        ['cascade', '级联模式，仅在 checkable 为 true 时有效，如果 cascade 为 true，则 checkable 变为 true，单模式无效', 'boolean', 'false'],
+        ['showLine', '是否显示线', 'boolean', 'false'],
+        ['loadData', '懒加载数据，仅在 <strong>item.isLeaf</strong> 为 <strong>false</strong> 时有效', 'function', '-'],
     ]">
 </ApiTable>
 
-<br />
+## 树节点 (Tree Node) 属性
 
-<ApiTable title="Tree Node Props"
+<ApiTable title="树节点 (Tree Node) 属性"
     :headers="['属性', '描述', '类型', '默认值']"
     :columns="[
-        ['value', 'Tree node value', 'string', ''],
-        ['label', 'Tree node label', 'string', ''],
-        ['children', 'Tree node children', 'array', '\[\]'],
-        ['isLeaf', 'Whether the tree node is leaf', 'boolean', 'false'],
-        ['disabled', 'Whether the tree node is disabled', 'boolean', 'false'],
+        ['value', '节点的值', 'string', ''],
+        ['label', '节点的标签', 'string', ''],
+        ['children', '子节点数据', 'array', '\[\]'],
+        ['isLeaf', '是否为懒加载节点', 'boolean', 'false'],
+        ['disabled', '是否禁用', 'boolean', 'false'],
     ]">
 </ApiTable>
 
-## Slots
+## 树 (Tree) 插槽
 
-<ApiTable title="Tree Slots"
+<ApiTable title="树 (Tree) 插槽"
     :headers="['插槽', '描述']" 
     :columns="[
-        ['label', 'Tree label'],
-        ['expand', 'Tree expand icon'],
-        ['collapse', 'Tree collapse icon'],
+        ['label', '树节点的标签插槽'],
+        ['expand', '展开图标插槽'],
+        ['collapse', '合并图标插槽'],
     ]">
 </ApiTable>
 
-## Events
+## 树 (Tree) 事件
 
-<ApiTable title="Tree Events"
-    :headers="['Event Name', 'Description', 'Parameters']"
+<ApiTable title="树 (Tree) 事件"
+    :headers="['事件', '描述', '回调参数']"
     :columns="[
-        ['on-expand', 'Expand event', 'node'],
-        ['on-node-click', 'Node click event', 'node'],
+        ['on-expand', '节点展开事件', 'node'],
+        ['on-node-click', '节点点击事件', 'node'],
     ]">
 </ApiTable>
 
@@ -643,4 +525,4 @@ export default {
         }
     }
 }
-</script>
+</script>
\ No newline at end of file
diff --git a/src/App.vue b/src/App.vue
index 7a4ee925..dd370de8 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,28 +1,36 @@
 <template>
   <div class="p-32 space-y-7 space-x-4">
     <div class="p-2 flex flex-col space-y-4 min-h-32 space-x-6 overflow-x-auto">
-      <ShadcnCarousel :items="items"
-                      direction="vertical"
-                      :interval="5000"
-                      @on-change="handleChange">
-      </ShadcnCarousel>
-
-      <ShadcnCarousel :items="items"
-                      :interval="5000"
-                      @on-change="handleChange">
-      </ShadcnCarousel>
+      当前选择的值 {{ value }}
+      <ShadcnTree v-model="value" :data="data"/>
     </div>
   </div>
 </template>
 
-<script setup lang="ts">
-const items = [
-  { text: 'Slide 1', src: 'https://picsum.photos/800/400' },
-  { text: 'Slide 2', src: 'https://picsum.photos/800/400' },
-  { text: 'Slide 3', src: 'https://picsum.photos/800/400' }
+<script setup>
+import { ref } from "vue"
+const value = ref([6])
+const data = [
+  {
+    value: 1,
+    label: 'Parent Node 1',
+    children: [
+      {value: 2, label: 'Child Node 1.1'},
+      {
+        value: 3,
+        label: 'Child Node 1.2',
+        children: [
+          {value: 4, label: 'Child Node 1.2.1'}
+        ]
+      }
+    ]
+  },
+  {
+    value: 5,
+    label: 'Parent Node 2',
+    children: [
+      {value: 6, label: 'Child Node 2.1'}
+    ]
+  }
 ]
-
-const handleChange = (index: number) => {
-  console.log('Current slide:', index)
-}
 </script>
\ No newline at end of file
diff --git a/src/ui/tree/ShadcnTree.vue b/src/ui/tree/ShadcnTree.vue
index 2b2267d5..db41dffe 100644
--- a/src/ui/tree/ShadcnTree.vue
+++ b/src/ui/tree/ShadcnTree.vue
@@ -4,7 +4,7 @@
                     :key="item.value"
                     :node="item"
                     :level="0"
-                    :selected-values="modelValue"
+                    :selected-values="selectedValues"
                     :checkable="checkable"
                     :cascade="cascade"
                     :show-line="showLine"
@@ -27,7 +27,7 @@
 </template>
 
 <script setup lang="ts">
-import { defineEmits, defineProps, ref, watch } from 'vue'
+import { computed, defineEmits, defineProps } from 'vue'
 import { TreeEmits, TreeNode, TreeProps } from './types'
 import ShadcnTreeNode from './ShadcnTreeNode.vue'
 
@@ -42,11 +42,7 @@ const props = withDefaults(defineProps<TreeProps>(), {
   loadData: undefined
 })
 
-const selectedNode = ref<any[]>([])
-
-watch(() => props.modelValue, (newValue) => {
-  selectedNode.value = newValue ?? []
-})
+const selectedValues = computed(() => props.modelValue || [])
 
 const onExpand = (node: TreeNode) => emit('on-expand', node)
 
@@ -181,4 +177,4 @@ const onNodeClick = (node: TreeNode) => {
   emit('update:modelValue', updatedValues)
   emit('on-node-click', node)
 }
-</script>
+</script>
\ No newline at end of file
diff --git a/src/ui/tree/ShadcnTreeNode.vue b/src/ui/tree/ShadcnTreeNode.vue
index c19e1dce..8c0a5b34 100644
--- a/src/ui/tree/ShadcnTreeNode.vue
+++ b/src/ui/tree/ShadcnTreeNode.vue
@@ -143,8 +143,26 @@ const nodeChecked = computed({
   }
 })
 
+// 判断当前节点是否是目标值的父节点
+const isParentOfSelected = (node: TreeNode, selectedValue: any): boolean => {
+  if (!node.children) {
+    return false
+  }
+  return node.children.some(child => {
+    if (child.value === selectedValue) {
+      return true
+    }
+    return isParentOfSelected(child, selectedValue)
+  })
+}
+
 watch(() => props.selectedValues, (newValues) => {
-  if (newValues.includes(props.node.value) && hasChildren.value) {
+  // 如果当前节点被选中，或者是选中节点的父节点，则展开
+  const shouldExpand = newValues.some(value => {
+    return isParentOfSelected(props.node, value)
+  })
+
+  if (shouldExpand || props.selectedValues.includes(props.node.value)) {
     isExpanded.value = true
   }
 }, { immediate: true })
@@ -185,4 +203,4 @@ const onNodeClick = () => {
 }
 
 const onChildNodeClick = (node: TreeNode) => emit('on-node-click', node)
-</script>
+</script>
\ No newline at end of file

From 50891238d5b3b343c91c62a387669cdd165a6c5d Mon Sep 17 00:00:00 2001
From: qianmoQ <shicheng@devlive.org>
Date: Fri, 10 Jan 2025 22:42:59 +0800
Subject: [PATCH 2/5] =?UTF-8?q?=E7=BB=84=E4=BB=B6(=E6=A0=91):=20=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81=E8=8A=82=E7=82=B9=E8=AE=BE=E7=BD=AE=20selected=20?=
 =?UTF-8?q?=E7=8A=B6=E6=80=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/components/view/tree.md |  1 +
 src/App.vue                  |  5 ++--
 src/ui/tree/ShadcnTree.vue   | 54 ++++++++++++++++++++++++++++++------
 src/ui/tree/types.ts         |  1 +
 4 files changed, 51 insertions(+), 10 deletions(-)

diff --git a/docs/components/view/tree.md b/docs/components/view/tree.md
index 22ca9ff1..4f741784 100644
--- a/docs/components/view/tree.md
+++ b/docs/components/view/tree.md
@@ -379,6 +379,7 @@ const data = [
         ['children', '子节点数据', 'array', '\[\]'],
         ['isLeaf', '是否为懒加载节点', 'boolean', 'false'],
         ['disabled', '是否禁用', 'boolean', 'false'],
+        ['selected', '是否选中', 'boolean', 'false'],
     ]">
 </ApiTable>
 
diff --git a/src/App.vue b/src/App.vue
index dd370de8..a00d9c83 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -9,7 +9,8 @@
 
 <script setup>
 import { ref } from "vue"
-const value = ref([6])
+
+const value = ref([])
 const data = [
   {
     value: 1,
@@ -20,7 +21,7 @@ const data = [
         value: 3,
         label: 'Child Node 1.2',
         children: [
-          {value: 4, label: 'Child Node 1.2.1'}
+          {value: 4, selected: true, label: 'Child Node 1.2.1'}
         ]
       }
     ]
diff --git a/src/ui/tree/ShadcnTree.vue b/src/ui/tree/ShadcnTree.vue
index db41dffe..d05a1927 100644
--- a/src/ui/tree/ShadcnTree.vue
+++ b/src/ui/tree/ShadcnTree.vue
@@ -27,7 +27,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, defineEmits, defineProps } from 'vue'
+import { computed, defineEmits, defineProps, onMounted, ref, watch } from 'vue'
 import { TreeEmits, TreeNode, TreeProps } from './types'
 import ShadcnTreeNode from './ShadcnTreeNode.vue'
 
@@ -42,9 +42,42 @@ const props = withDefaults(defineProps<TreeProps>(), {
   loadData: undefined
 })
 
-const selectedValues = computed(() => props.modelValue || [])
+// 存储所有预设选中的节点值
+const preSelectedValues = ref<any[]>([])
 
-const onExpand = (node: TreeNode) => emit('on-expand', node)
+// 递归查找所有预设选中的节点
+const findPreSelectedNodes = (nodes: TreeNode[]) => {
+  nodes.forEach(node => {
+    if (node.selected && !preSelectedValues.value.includes(node.value)) {
+      preSelectedValues.value.push(node.value)
+    }
+    if (node.children && node.children.length > 0) {
+      findPreSelectedNodes(node.children)
+    }
+  })
+}
+
+// 合并 modelValue 和预设选中的值
+const selectedValues = computed(() => {
+  const uniqueValues = new Set([...props.modelValue, ...preSelectedValues.value])
+  return Array.from(uniqueValues)
+})
+
+// 在组件挂载时初始化预设选中的节点
+onMounted(() => {
+  findPreSelectedNodes(props.data)
+  // 如果有预设选中的节点，通知父组件更新
+  if (preSelectedValues.value.length > 0) {
+    emit('update:modelValue', selectedValues.value)
+  }
+})
+
+// 观察数据变化，更新预设选中的节点
+watch(() => props.data, () => {
+  preSelectedValues.value = []
+  findPreSelectedNodes(props.data)
+  emit('update:modelValue', selectedValues.value)
+}, { deep: true })
 
 // Recursively gets the values of all child nodes
 const getAllChildrenValues = (node: TreeNode): any[] => {
@@ -96,34 +129,39 @@ const areAllChildrenSelected = (node: TreeNode, selectedValues: any[]): boolean
   })
 }
 
+const onExpand = (node: TreeNode) => emit('on-expand', node)
+
 const onNodeClick = (node: TreeNode) => {
   if (!props.checkable) {
-    const index = props.modelValue.indexOf(node.value)
+    const index = selectedValues.value.indexOf(node.value)
     let updatedValues: any[]
+
     if (index === -1) {
       if (!props.multiple) {
         updatedValues = [node.value]
+        preSelectedValues.value = [] // 单选模式下清除预设选中
       }
       else {
-        updatedValues = [...props.modelValue, node.value]
+        updatedValues = [...selectedValues.value, node.value]
       }
     }
     else {
-      updatedValues = props.modelValue.slice()
-      updatedValues.splice(index, 1)
+      updatedValues = selectedValues.value.filter(v => v !== node.value)
     }
+
     emit('update:modelValue', updatedValues)
     emit('on-node-click', node)
     return
   }
 
-  let updatedValues = [...props.modelValue]
+  let updatedValues = [...selectedValues.value]
   const index = updatedValues.indexOf(node.value)
 
   if (!props.cascade) {
     if (index === -1) {
       if (!props.multiple) {
         updatedValues = [node.value]
+        preSelectedValues.value = [] // 单选模式下清除预设选中
       }
       else {
         updatedValues = [...updatedValues, node.value]
diff --git a/src/ui/tree/types.ts b/src/ui/tree/types.ts
index 2e130fc7..59d264c5 100644
--- a/src/ui/tree/types.ts
+++ b/src/ui/tree/types.ts
@@ -5,6 +5,7 @@ export interface TreeNode
     children: TreeNode[]
     isLeaf?: boolean
     disabled?: boolean
+    selected?: boolean
 }
 
 export interface TreeProps

From 483ffb0c3ab819563ca04657ed858ffe576adacb Mon Sep 17 00:00:00 2001
From: qianmoQ <shicheng@devlive.org>
Date: Fri, 10 Jan 2025 22:51:48 +0800
Subject: [PATCH 3/5] =?UTF-8?q?=E7=BB=84=E4=BB=B6(=E6=8C=89=E9=92=AE):=20?=
 =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=8F=97=E7=88=B6=E5=AE=B9=E5=99=A8=E5=BD=B1?=
 =?UTF-8?q?=E5=93=8D=E5=AF=BC=E8=87=B4=E5=8F=98=E5=BD=A2=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                    | 37 ++++++++--------------------------
 src/ui/button/ShadcnButton.vue |  7 +------
 2 files changed, 9 insertions(+), 35 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index a00d9c83..1cabfca6 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,37 +1,16 @@
 <template>
   <div class="p-32 space-y-7 space-x-4">
     <div class="p-2 flex flex-col space-y-4 min-h-32 space-x-6 overflow-x-auto">
-      当前选择的值 {{ value }}
-      <ShadcnTree v-model="value" :data="data"/>
+      <ShadcnButton type="primary">Primary</ShadcnButton>
+      <ShadcnButton type="success">Success</ShadcnButton>
+      <ShadcnButton type="warning">Warning</ShadcnButton>
+      <ShadcnButton type="danger">Danger</ShadcnButton>
+      <ShadcnButton type="info">Info</ShadcnButton>
+      <ShadcnButton type="text">Text</ShadcnButton>
+      <ShadcnButton type="default">Default</ShadcnButton>
     </div>
   </div>
 </template>
 
-<script setup>
-import { ref } from "vue"
-
-const value = ref([])
-const data = [
-  {
-    value: 1,
-    label: 'Parent Node 1',
-    children: [
-      {value: 2, label: 'Child Node 1.1'},
-      {
-        value: 3,
-        label: 'Child Node 1.2',
-        children: [
-          {value: 4, selected: true, label: 'Child Node 1.2.1'}
-        ]
-      }
-    ]
-  },
-  {
-    value: 5,
-    label: 'Parent Node 2',
-    children: [
-      {value: 6, label: 'Child Node 2.1'}
-    ]
-  }
-]
+<script setup lang="ts">
 </script>
\ No newline at end of file
diff --git a/src/ui/button/ShadcnButton.vue b/src/ui/button/ShadcnButton.vue
index 2a269b1b..c7b33201 100644
--- a/src/ui/button/ShadcnButton.vue
+++ b/src/ui/button/ShadcnButton.vue
@@ -166,11 +166,9 @@ const circleClass = computed(() => {
 const buttonProps = computed(() => ({
   ...(props.to ? { link: props.to } : { type: props.submit ? 'submit' : props.reset ? 'reset' : 'button' }),
   class: [
-    // Style
     'inline-flex items-center justify-center whitespace-nowrap transition-colors',
-    // Size
+    'w-fit',
     !props.circle && ButtonSize[finalSize.value],
-    // Type style with conditional hover
     props.ghost
         ? [
           'bg-transparent',
@@ -180,12 +178,9 @@ const buttonProps = computed(() => ({
           !props.disabled && !props.loading && getHoverClass.value
         ]
         : getTypeStyles.value,
-    // Rounded corners
     { 'rounded-full': props.round || props.circle },
     { 'rounded-md': !props.round && !props.circle },
-    // Rounded
     circleClass.value,
-    // State
     { 'opacity-50 cursor-not-allowed': props.loading || props.disabled }
   ],
   disabled: props.loading || props.disabled,

From 23752db0bfe94e8b44ae2e900280404ec3279cc2 Mon Sep 17 00:00:00 2001
From: qianmoQ <shicheng@devlive.org>
Date: Fri, 10 Jan 2025 23:36:57 +0800
Subject: [PATCH 4/5] =?UTF-8?q?=E7=BB=84=E4=BB=B6(=E9=80=89=E6=8B=A9?=
 =?UTF-8?q?=E5=99=A8):=20=E6=94=AF=E6=8C=81=E9=85=8D=E7=BD=AE=E5=8A=A0?=
 =?UTF-8?q?=E8=BD=BD=E7=8A=B6=E6=80=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/.vitepress/config.js                   |   6 +-
 docs/components/form/checkbox.md            |   4 +-
 docs/components/form/radio.md               |   4 +-
 docs/components/form/select.md              | 149 ++++++-------
 docs/components/form/toggle.md              |   8 +-
 docs/components/form/upload.md              |   2 +-
 docs/components/layout/avatar.md            |   4 +-
 docs/components/layout/card.md              | 231 +++-----------------
 docs/components/layout/ellipsis.md          |   2 +-
 docs/components/view/table.md               |   4 +-
 docs/components/view/tag.md                 |   4 +-
 src/App.vue                                 |  18 +-
 src/ui/select/ShadcnSelect.vue              |  22 +-
 src/ui/select/types.ts                      |   1 +
 src/ui/skeleton/item/ShadcnSkeletonItem.vue |   2 +-
 15 files changed, 136 insertions(+), 325 deletions(-)

diff --git a/docs/.vitepress/config.js b/docs/.vitepress/config.js
index 48cadf3a..ad223997 100644
--- a/docs/.vitepress/config.js
+++ b/docs/.vitepress/config.js
@@ -149,7 +149,7 @@ export default {
                 })(),
                 (() => {
                     const items = [
-                        {text: 'Card', link: 'layout/card', icon: '/components/layout/card.svg', version: '2024.1.1'},
+                        {text: '卡片 (Card)', link: 'layout/card', icon: '/components/layout/card.svg', version: '2024.1.1'},
                         {text: 'Row / Col', link: 'layout/row-col', icon: '/components/layout/row-col.svg', version: '2024.1.2'},
                         {text: 'Divider', link: 'layout/divider', icon: '/components/layout/divider.svg', version: '2024.1.2'},
                         {text: 'Ellipsis', link: 'layout/ellipsis', icon: '/components/layout/ellipsis.svg', version: '2024.1.2'},
@@ -163,7 +163,7 @@ export default {
                     ]
 
                     return {
-                        text: `Layout [ ${items.length} ]`,
+                        text: `布局组件 [ ${items.length} ]`,
                         base: '/components/',
                         collapsed: false,
                         items: items.map(item => createSidebarItem(item))
@@ -212,7 +212,7 @@ export default {
                         {text: 'Switch', link: 'form/switch', icon: '/components/form/switch.svg', version: '2024.1.2'},
                         {text: 'Radio', link: 'form/radio', icon: '/components/form/radio.svg', version: '2024.1.2'},
                         {text: 'Checkbox', link: 'form/checkbox', icon: '/components/form/checkbox.svg', version: '2024.1.2'},
-                        {text: 'Select', link: 'form/select', icon: '/components/form/select.svg', version: '2024.1.2'},
+                        {text: '选择器 (Select)', link: 'form/select', icon: '/components/form/select.svg', version: '2024.1.2'},
                         {text: 'Rate', link: 'form/rate', icon: '/components/form/rate.svg', version: '2024.1.2'},
                         {text: 'Form', link: 'form/form', icon: '/components/form/form.svg', version: '2024.2.0'},
                         {text: 'Slider', link: 'form/slider', icon: '/components/form/slider.svg', version: '2024.2.0'},
diff --git a/docs/components/form/checkbox.md b/docs/components/form/checkbox.md
index b41b43b1..a4f969b5 100644
--- a/docs/components/form/checkbox.md
+++ b/docs/components/form/checkbox.md
@@ -109,9 +109,9 @@ const checked = ref('Primary')
 
 :::
 
-## Group
+## 组 (group)
 
-<CodeRunner title="Group">
+<CodeRunner title="组 (group)">
     Checkbox Group Value: {{ checkedGroup }}
     <ShadcnCheckboxGroup v-model="checkedGroup">
         <ShadcnCheckbox value="Vue">Vue</ShadcnCheckbox>
diff --git a/docs/components/form/radio.md b/docs/components/form/radio.md
index 43b92a9d..87e49a05 100644
--- a/docs/components/form/radio.md
+++ b/docs/components/form/radio.md
@@ -108,9 +108,9 @@ const checked = ref('Primary')
 
 :::
 
-## Group
+## 组 (group)
 
-<CodeRunner title="Group">
+<CodeRunner title="组 (group)">
     Checkbox Group Value: {{ checkedGroup }}
     <ShadcnRadioGroup v-model="checkedGroup">
         <ShadcnRadio value="ON">ON</ShadcnRadio>
diff --git a/docs/components/form/select.md b/docs/components/form/select.md
index 151ab2ef..3564c480 100644
--- a/docs/components/form/select.md
+++ b/docs/components/form/select.md
@@ -1,15 +1,16 @@
 ---
-title: Shadcn Select
+title: 选择器 (Select)
 ---
 
 # 介绍
 
-This document is mainly used to describe some features and usage of the ShadcnSelect and ShadcnSelectOption component.
+<br />
+
+本文档主要用于描述 `ShadcnSelect` 组件的一些特性和用法。
 
 ## 用法
 
 <CodeRunner title="用法">
-    <p>Select Value: {{ defaultSelect }}</p>
     <ShadcnSelect v-model="defaultSelect" :options="defaultSelectOptions" />
 </CodeRunner>
 
@@ -37,7 +38,6 @@ const defaultSelectOptions = [
 ## 禁用 (disabled)
 
 <CodeRunner title="禁用 (disabled)">
-    <p>Select Value: {{ defaultSelect }}</p>
     <ShadcnSelect v-model="defaultSelect" :options="defaultSelectOptions" disabled />
 </CodeRunner>
 
@@ -62,52 +62,10 @@ const defaultSelectOptions = [
 
 :::
 
-## Slot
-
-<CodeRunner title="Slot">
-    <p>Select Value: {{ slotSelect }}</p>
-    <ShadcnSelect v-model="slotSelect">
-        <template #options>
-            <ShadcnSelectOption v-for="i in 10"
-                :key="i"
-                :selected="defaultSelect === `Value ${i}`"
-                :disabled="i % 2 === 0"
-                :value="`Value ${i}`"
-                :label="`Option ${i}`"/>
-        </template>
-    </ShadcnSelect>
-</CodeRunner>
-
-::: details 查看代码
-
-```vue
-<template>
-    <ShadcnSelect v-model="defaultSelect">
-        <template #options>
-            <ShadcnSelectOption v-for="i in 10"
-                :key="i"
-                :selected="defaultSelect === `Value ${i}`"
-                :disabled="i % 2 === 0"
-                :value="`Value ${i}`"
-                :label="`Option ${i}`"/>
-        </template>
-    </ShadcnSelect>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue';
-
-const defaultSelect = ref(null)
-</script>
-```
-
-:::
-
 ## 尺寸 (size)
 
 <CodeRunner title="尺寸 (size)">
     <div class="space-y-2">
-        <p>Select Value: {{ defaultSelect }}</p>
         <ShadcnSelect v-model="defaultSelect" :options="defaultSelectOptions" size="small" />
         <ShadcnSelect v-model="defaultSelect" :options="defaultSelectOptions" size="default" />
         <ShadcnSelect v-model="defaultSelect" :options="defaultSelectOptions" size="large" />
@@ -142,7 +100,6 @@ const defaultSelectOptions = [
 
 <CodeRunner title="类型 (type)">
     <div class="space-y-2">
-        <p>Select Value: {{ defaultSelect }}</p>
         <ShadcnSelect v-model="defaultSelect" :options="defaultSelectOptions" type="primary" />
         <ShadcnSelect v-model="defaultSelect" :options="defaultSelectOptions" type="success" />
         <ShadcnSelect v-model="defaultSelect" :options="defaultSelectOptions" type="warning" />
@@ -175,13 +132,12 @@ const defaultSelectOptions = [
 
 :::
 
-## Border
+## 边框 (border)
 
 ::: raw
 
-<CodeRunner title="Border">
+<CodeRunner title="边框 (border)">
     <div class="space-y-2">
-        <p>Select Value: {{ defaultSelect }}</p>
         <ShadcnSelect v-model="defaultSelect" :options="defaultSelectOptions" />
         <ShadcnSelect v-model="defaultSelect" :options="defaultSelectOptions" :border="false" />
     </div>
@@ -212,11 +168,11 @@ const defaultSelectOptions = [
 
 :::
 
-## Group
+## 组 (group)
 
 ::: raw
 
-<CodeRunner title="Group">
+<CodeRunner title="组 (group)">
     <ShadcnSelect v-model="defaultSelect">
       <template #options>
         <ShadcnSelectGroup label="Group 1">
@@ -264,11 +220,11 @@ const defaultSelect = ref('')
 
 :::
 
-## Multiple
+## 多选 (multiple)
 
 ::: raw
 
-<CodeRunner title="Multiple">
+<CodeRunner title="多选 (multiple)">
     <ShadcnSelect v-model="defaultSelect" multiple :options="defaultSelectOptions" />
 </CodeRunner>
 
@@ -295,11 +251,22 @@ const defaultSelectOptions = [
 
 :::
 
-## Lazy data
+## 加载 (loading)
+
+::: raw
+
+<CodeRunner title="加载 (loading)">
+    <ShadcnButton @click="onClick">{{ !loading ? '显示 Loading' : '隐藏 Loading' }}</ShadcnButton>
+    <ShadcnSelect v-model="defaultSelect" :options="defaultSelectOptions" :loading="loading" />
+</CodeRunner>
+
+:::
+
+## 懒加载 (lazy)
 
 ::: raw
 
-<CodeRunner title="Lazy data">
+<CodeRunner title="懒加载 (lazy)">
   <ShadcnSelect v-model="lazySelect"
                 lazy
                 :options="options"
@@ -413,67 +380,69 @@ loadMoreData((children) => {
 
 :::
 
-## API Attributes
+## 选择器 (Select) 属性
 
-<ApiTable title="Select Props"
-    :headers="['Attribute', 'Description', 'Type', 'Default', 'List']"
+<ApiTable title="选择器 (Select) 属性"
+    :headers="['属性', '描述', '类型', '默认值', '支持列表']"
     :columns="[
-        ['modelValue', 'The value of the select', 'any | any\[\]', '-', '-'],
-        ['options', 'The options of the select, format is { label: string, value: any, disabled?: boolean, selected?: boolean }', 'array', '-', '-'],
-        ['disabled', 'Whether the select is disabled', 'boolean', 'false', 'true | false'],
-        ['size', 'The size of the select', 'enum', 'default', 'small | default | large'],
-        ['type', 'The type of the select', 'enum', 'default', 'primary | success | warning | error'],
-        ['placeholder', 'The placeholder of the select', 'string', '-', '-'],
-        ['multiple', 'Whether the select is multiple', 'boolean', 'false', 'true | false'],
-        ['border', 'Whether the select has border', 'boolean', 'true', 'true | false'],
-        ['lazy', 'Whether the select is lazy', 'boolean', 'false', 'true | false'],
-        ['loadData', 'Load data when the select is lazy', 'function', '-', '-'],
+        ['modelValue', '当前选择的值', 'any | any\[\]', '-', '-'],
+        ['options', '选择器的选项，格式为 { label: string, value: any, disabled?: boolean, selected?: boolean }', 'array', '-', '-'],
+        ['disabled', '是否为禁用', 'boolean', 'false', 'true | false'],
+        ['size', '选择器的尺寸', 'enum', 'default', 'small | default | large'],
+        ['type', '选择器的类型', 'enum', 'default', 'primary | success | warning | error'],
+        ['placeholder', '选择器的占位符', 'string', '-', '-'],
+        ['multiple', '是否为多选', 'boolean', 'false', 'true | false'],
+        ['border', '是否显示边框', 'boolean', 'true', 'true | false'],
+        ['lazy', '是否为懒加载', 'boolean', 'false', 'true | false'],
+        ['loading', '是否为加载中', 'boolean', 'false', 'true | false'],
+        ['loadData', '懒加载数据函数', 'function', '-', '-'],
     ]">
 </ApiTable>
 
-<br />
+## 选择器选项 (Select Option) 属性
 
-<ApiTable title="Select Option Props"
-    :headers="['Attribute', 'Description', 'Type', 'Default']"
+<ApiTable title="选择器选项 (Select Option) 属性"
+    :headers="['属性', '描述', '类型', '默认值']"
     :columns="[
-        ['label', 'The label of the option', 'String', '-'],
-        ['value', 'The value of the option', 'Any', '-'],
-        ['disabled', 'Whether the option is disabled', 'Boolean', 'false'],
-        ['selected', 'Whether the option is selected', 'Boolean', 'false'],
+        ['label', '选项标签', 'string', '-'],
+        ['value', '选项值', 'any', '-'],
+        ['disabled', '是否为禁用', 'boolean', 'false'],
+        ['selected', '是否为选中', 'boolean', 'false'],
     ]">
 </ApiTable>
 
-<br />
+## 选择器分组 (Select Group) 属性
 
-<ApiTable title="Select Group Props"
-    :headers="['Attribute', 'Description', 'Type', 'Default']"
+<ApiTable title="选择器分组 (Select Group) 属性"
+    :headers="['属性', '描述', '类型', '默认值']"
     :columns="[
-        ['label', 'The label of the group', 'String', '-'],
+        ['label', '分组标签', 'string', '-'],
     ]">
 </ApiTable>
 
-<br />
+## 选择器 (Select) 插槽
 
-<ApiTable title="Select Slots"
+<ApiTable title="选择器 (Select) 插槽"
     :headers="['插槽', '描述']" 
     :columns="[
-        ['options', 'Option slot'],
+        ['options', '选择器的选项'],
     ]">
 </ApiTable>
 
-<br />
+## 选择器 (Select) 事件
 
-<ApiTable title="Select Events"
+<ApiTable title="选择器 (Select) 事件"
     :headers="['事件', '描述', '回调参数']"
     :columns="[
-        ['onChange', 'Triggered when the value of the select is changed', 'any'],
-        ['onClickOutside', 'Triggered when the click outside the select is triggered', 'boolean'],
+        ['on-change', '更改选择器的值时触发', 'any'],
+        ['on-click-outside', '点击选择器外部时触发', 'boolean'],
     ]">
 </ApiTable>
 
 <script setup lang="ts">
 import { ref } from 'vue';
 
+const loading = ref(false)
 const defaultSelect = ref('Value 1')
 const defaultSelectOptions = [
     { label: 'Vue', value: 'Vue' },
@@ -510,4 +479,8 @@ const loadMoreData = (callback: (children: any[]) => void) => {
 loadMoreData((children) => {
   options.value = children
 })
-</script>
+
+const onClick = () => {
+  loading.value = !loading.value
+}
+</script>
\ No newline at end of file
diff --git a/docs/components/form/toggle.md b/docs/components/form/toggle.md
index 9a5944d0..17e6c9cf 100644
--- a/docs/components/form/toggle.md
+++ b/docs/components/form/toggle.md
@@ -84,11 +84,11 @@ const defaultValue = ref(null)
 
 :::
 
-## Group
+## 组 (group)
 
 ::: raw
 
-<CodeRunner title="Group">
+<CodeRunner title="组 (group)">
   <div class="space-y-2">
     <p>Default Value: {{ defaultValue }}</p>
     <ShadcnToggleGroup v-model="defaultValue" size="small">
@@ -132,11 +132,11 @@ const defaultValue = ref(null)
 
 :::
 
-## Multiple
+## 多选 (multiple)
 
 ::: raw
 
-<CodeRunner title="Multiple">
+<CodeRunner title="多选 (multiple)">
     <p>Default Value: {{ defaultValue }}</p>
     <ShadcnToggleGroup v-model="defaultValue" multiple>
       <ShadcnToggle value="1">O1</ShadcnToggle>
diff --git a/docs/components/form/upload.md b/docs/components/form/upload.md
index 25939ef5..8d0c25ab 100644
--- a/docs/components/form/upload.md
+++ b/docs/components/form/upload.md
@@ -26,7 +26,7 @@ This document is mainly used to describe some features and usage of the ShadcnUp
 
 :::
 
-## Multiple
+## 多选 (multiple)
 
 ::: raw
 
diff --git a/docs/components/layout/avatar.md b/docs/components/layout/avatar.md
index 6e244bd0..de41e453 100644
--- a/docs/components/layout/avatar.md
+++ b/docs/components/layout/avatar.md
@@ -86,11 +86,11 @@ This document is mainly used to describe some features and usage of the ShadcnAv
 
 :::
 
-## Group
+## 组 (group)
 
 ::: raw
 
-<CodeRunner title="Group">
+<CodeRunner title="组 (group)">
     <ShadcnAvatarGroup :items="items" />
     <ShadcnAvatarGroup :items="items" size="small"/>
     <ShadcnAvatarGroup :items="items" size="large"/>
diff --git a/docs/components/layout/card.md b/docs/components/layout/card.md
index a986645b..0bda5be5 100644
--- a/docs/components/layout/card.md
+++ b/docs/components/layout/card.md
@@ -1,16 +1,17 @@
 ---
-title: Shadcn Card
+title: 卡片 (Card)
 ---
 
 # 介绍
 
-This document is mainly used to describe some features and usage of the ShadcnCard component.
+<br />
 
-## Basic Usage
+本文档主要用于描述 `ShadcnCard` 组件的一些特性和用法。
 
-<CodeRunner title="Basic Usage"
-    description="Create a simple card.">
-    <ShadcnCard title="Title">
+## 用法
+
+<CodeRunner title="用法">
+    <ShadcnCard title="用法">
         <div class="flex items-center justify-center h-32">Content</div>
     </ShadcnCard>
 </CodeRunner>
@@ -30,10 +31,9 @@ This document is mainly used to describe some features and usage of the ShadcnCa
 
 :::
 
-## Description
+## 描述 (description)
 
-<CodeRunner title="Description"
-    description="Create a card with description.">
+<CodeRunner title="描述 (description)">
     <ShadcnCard title="Title" description="Description">
         <div class="flex items-center justify-center h-32">Content</div>
     </ShadcnCard>
@@ -54,54 +54,9 @@ This document is mainly used to describe some features and usage of the ShadcnCa
 
 :::
 
-## No Title
-
-<CodeRunner title="No Title"
-    description="Create a card without title.">
-    <ShadcnCard>
-        <div class="flex items-center justify-center h-32">Content</div>
-    </ShadcnCard>
-</CodeRunner>
-
-::: details 查看代码
-
-```vue
-<template>
-    <ShadcnCard>
-        <div class="flex items-center justify-center h-32">Content</div>
-    </ShadcnCard>
-</template>
-
-<script setup lang="ts">
-</script>
-```
-
-:::
-
-## No Content
-
-<CodeRunner title="No Content"
-    description="Create a card without content.">
-    <ShadcnCard title="Title"></ShadcnCard>
-</CodeRunner>
-
-::: details 查看代码
-
-```vue
-<template>
-    <ShadcnCard title="Title"></ShadcnCard>
-</template>
-
-<script setup lang="ts">
-</script>
-```
-
-:::
-
-## Shadow
+## 阴影 (shadow)
 
-<CodeRunner title="Custom Title Class"
-    description="Create a card with custom title class.">
+<CodeRunner title="阴影 (shadow)">
     <div class="space-y-4">
         <ShadcnCard title="Shadow Never" shadow="never"/>
         <ShadcnCard title="Shadow Always" shadow="always"/>
@@ -126,11 +81,11 @@ This document is mainly used to describe some features and usage of the ShadcnCa
 
 :::
 
-## Loading
+## 加载 (loading)
 
 ::: raw
 
-<CodeRunner title="Loading">
+<CodeRunner title="加载 (loading)">
     <ShadcnCard title="Loading" :loading="true">
         <div class="flex items-center justify-center h-32">Content</div>
     </ShadcnCard>
@@ -160,9 +115,9 @@ This document is mainly used to describe some features and usage of the ShadcnCa
 
 :::
 
-## Border
+## 边框 (border)
 
-<CodeRunner title="Border">
+<CodeRunner title="边框 (border)">
     <ShadcnCard title="Border" border>
         <div class="flex items-center justify-center h-32">Content</div>
     </ShadcnCard>
@@ -189,153 +144,29 @@ This document is mainly used to describe some features and usage of the ShadcnCa
 
 :::
 
-## Custom Title Slot
-
-<CodeRunner title="Custom Title Slot"
-    description="Create a card with custom title slot.">
-    <ShadcnCard>
-        <template #title>Custom Title</template>
-        <div class="flex items-center justify-center h-32">Content</div>
-    </ShadcnCard>
-</CodeRunner>
-
-::: details 查看代码
-
-```vue
-<template>
-    <ShadcnCard>
-        <template #title>Custom Title</template>
-        <div class="flex items-center justify-center h-32">Content</div>
-    </ShadcnCard>
-</template>
-
-<script setup lang="ts">
-</script>
-```
-
-:::
-
-## Custom Description Slot
-
-<CodeRunner title="Custom Description Slot"
-    description="Create a card with custom description slot.">
-    <ShadcnCard title="Title">
-        <template #description>Custom Description</template>
-        <div class="flex items-center justify-center h-32">Content</div>
-    </ShadcnCard>
-</CodeRunner>
-
-::: details 查看代码
-
-```vue
-<template>
-    <ShadcnCard title="Title">
-        <template #description>Custom Description</template>
-        <div class="flex items-center justify-center h-32">Content</div>
-    </ShadcnCard>
-</template>
-
-<script setup lang="ts">
-</script>
-```
-
-:::
-
-## Custom Content Slot
-
-<CodeRunner title="Custom Content Slot"
-    description="Create a card with custom content slot.">
-    <ShadcnCard title="Title">
-        <template #content>Custom Content</template>
-    </ShadcnCard>
-</CodeRunner>
-
-::: details 查看代码
-
-```vue
-<template>
-    <ShadcnCard title="Title">
-        <template #content>Custom Content</template>
-    </ShadcnCard>
-</template>
-
-<script setup lang="ts">
-</script>
-```
-
-:::
-
-## Custom Footer Slot
-
-<CodeRunner title="Custom Footer Slot"
-    description="Create a card with custom footer slot.">
-    <ShadcnCard title="Title">
-        <template #footer>Custom Footer</template>
-    </ShadcnCard>
-</CodeRunner>
-
-::: details 查看代码
-
-```vue
-<template>
-    <ShadcnCard title="Title">
-        <template #footer>Custom Footer</template>
-    </ShadcnCard>
-</template>
-
-<script setup lang="ts">
-</script>
-```
-
-:::
-
-## Custom Extra Slot
-
-<CodeRunner title="Custom Extra Slot"
-    description="Create a card with custom extra slot.">
-    <ShadcnCard title="Title">
-        <template #extra>Custom Extra</template>
-    </ShadcnCard>
-</CodeRunner>
-
-::: details 查看代码
-
-```vue
-<template>
-    <ShadcnCard title="Title">
-        <template #extra>Custom Extra</template>
-    </ShadcnCard>
-</template>
-
-<script setup lang="ts">
-</script>
-```
-
-:::
-
-## API Attributes
+## 卡片 (Card) 属性
 
-<ApiTable title="Card Props"
+<ApiTable title="卡片 (Card)"
     :headers="['属性', '描述', '类型', '默认值', '依赖', '支持列表']"
     :columns="[
-        ['title', 'Card title', 'string', '-', '-', '-'],
-        ['description', 'Card description', 'string', '-', 'title', '-'],
-        ['shadow', 'Show shadow mode', 'enum', 'never', '-', 'never | always | hover'],
-        ['loading', 'Whether to display loading', 'boolean', 'false', '-', '-'],
-        ['border', 'Whether to display border', 'boolean', 'true', '-', '-'],
-        ['onlyContentLoading', 'Whether to display only content loading', 'boolean', 'false', '-', '-'],
+        ['title', '卡片标题', 'string', '-', '-', '-'],
+        ['description', '卡片描述', 'string', '-', 'title', '-'],
+        ['shadow', '卡片阴影模式', 'enum', 'never', '-', 'never | always | hover'],
+        ['loading', '是否显示加载', 'boolean', 'false', '-', '-'],
+        ['border', '是否显示边框', 'boolean', 'true', '-', '-'],
+        ['onlyContentLoading', '是否仅显示内容加载，设置后加载状态不会显示在标题上', 'boolean', 'false', '-', '-'],
     ]">
 </ApiTable>
 
-<br />
+## 卡片 (Card) 插槽
 
-<ApiTable title="Card Slots"
+<ApiTable title="卡片 (Card) 插槽"
     :headers="['插槽', '描述']" 
     :columns="[
-        ['title', 'Card title slot'],
-        ['description', 'Card description slot'],
-        ['extra', 'Card extra slot'],
-        ['content', 'Card content slot'],
-        ['footer', 'Card footer slot'],
+        ['title', '卡片标题插槽'],
+        ['description', '卡片描述插槽'],
+        ['extra', '卡片额外信息插槽，在标题的右侧显示'],
+        ['content', '卡片内容插槽'],
+        ['footer', '卡片底部插槽'],
     ]">
-</ApiTable>
+</ApiTable>
\ No newline at end of file
diff --git a/docs/components/layout/ellipsis.md b/docs/components/layout/ellipsis.md
index 01e719ad..976e2f0e 100644
--- a/docs/components/layout/ellipsis.md
+++ b/docs/components/layout/ellipsis.md
@@ -25,7 +25,7 @@ This document is mainly used to describe some features and usage of the ShadcnEl
 
 :::
 
-## Multiple lines
+## 多选 (multiple) lines
 
 <CodeRunner title="Multiple lines">
     <ShadcnEllipsis line="4" text="Steve Jobs (English: Steve Jobs) is an American entrepreneur, marketer and inventor. He is one of the co-founders of Apple and has served as chairman and CEO. He is also the founder and CEO of NeXT and the founder and former CEO of Pixar Animation. He was a member of the board of directors of the Walt Disney Company in 2006. The place where Apple's press conference was held in September 2017 was named Steve Jobs Theater after him." />
diff --git a/docs/components/view/table.md b/docs/components/view/table.md
index cdf7b965..9b9adc0c 100644
--- a/docs/components/view/table.md
+++ b/docs/components/view/table.md
@@ -74,11 +74,11 @@ const data = [
 
 :::
 
-## Border
+## 边框 (border)
 
 ::: raw
 
-<CodeRunner title="Border">
+<CodeRunner title="边框 (border)">
     <ShadcnTable :columns="columns" :data="data" border/>
 </CodeRunner>
 
diff --git a/docs/components/view/tag.md b/docs/components/view/tag.md
index 74b99e19..28d2314c 100644
--- a/docs/components/view/tag.md
+++ b/docs/components/view/tag.md
@@ -70,11 +70,11 @@ This document is mainly used to describe some features and usage of the ShadcnTa
 
 :::
 
-## Border
+## 边框 (border)
 
 ::: raw
 
-<CodeRunner title="Border">
+<CodeRunner title="边框 (border)">
     <ShadcnSpace wrap>
       <ShadcnTag text="Text" border/>
       <ShadcnTag text="Text" type="primary" border/>
diff --git a/src/App.vue b/src/App.vue
index 1cabfca6..eeac9fff 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,16 +1,18 @@
 <template>
   <div class="p-32 space-y-7 space-x-4">
-    <div class="p-2 flex flex-col space-y-4 min-h-32 space-x-6 overflow-x-auto">
-      <ShadcnButton type="primary">Primary</ShadcnButton>
-      <ShadcnButton type="success">Success</ShadcnButton>
-      <ShadcnButton type="warning">Warning</ShadcnButton>
-      <ShadcnButton type="danger">Danger</ShadcnButton>
-      <ShadcnButton type="info">Info</ShadcnButton>
-      <ShadcnButton type="text">Text</ShadcnButton>
-      <ShadcnButton type="default">Default</ShadcnButton>
+    <div class="p-2 flex flex-col space-y-4 min-h-60 space-x-6 overflow-x-auto">
+      <ShadcnSelect v-model="defaultSelect" :options="defaultSelectOptions" loading />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import { ref } from 'vue';
+
+const defaultSelect = ref(null)
+const defaultSelectOptions = [
+  { label: 'Vue', value: 'Vue' },
+  { label: 'Nuxt', value: 'Nuxt', disabled: true },
+  { label: 'Svelte', value: 'Svelte' }
+]
 </script>
\ No newline at end of file
diff --git a/src/ui/select/ShadcnSelect.vue b/src/ui/select/ShadcnSelect.vue
index 4712f978..7712e66c 100644
--- a/src/ui/select/ShadcnSelect.vue
+++ b/src/ui/select/ShadcnSelect.vue
@@ -1,6 +1,12 @@
 <template>
   <div ref="selectRef" class="relative">
-    <div :class="['flex rounded-md px-2 relative',
+    <div v-if="loading" :class="['flex rounded-md relative',
+                  border && 'border border-gray-200',
+                  MinSize[size]
+         ]">
+      <ShadcnSkeleton animation :rows="1" class="w-full"/>
+    </div>
+    <div v-else :class="['flex rounded-md px-2 relative',
                   border && 'border border-gray-200 hover:border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2',
                   {
                     'cursor-pointer': !disabled,
@@ -26,7 +32,7 @@
               </span>
             </template>
             <template v-else>
-              <span class="flex items-center min-w-0 truncate select-none text-gray-300 px-2">
+              <span class="flex items-center min-w-0 truncate select-none text-gray-600 px-2">
                 {{ selectedLabels[0] || placeholder }}
               </span>
             </template>
@@ -56,7 +62,7 @@
         leave-to-class="transform -translate-y-2 scale-95 opacity-0">
       <div v-show="isExpanded"
            ref="dropdownRef"
-           class="absolute z-10 w-full px-2 rounded-md border border-gray-200 bg-white shadow-lg mt-1 py-1 overflow-y-auto max-h-60"
+           class="absolute z-20 w-full px-2 rounded-md border border-gray-200 bg-white shadow-lg mt-1 py-1 overflow-y-auto max-h-60"
            @scroll="handleScroll">
         <slot name="options">
           <ShadcnSelectOption v-for="(option, index) in internalOptions"
@@ -83,6 +89,7 @@ import { MinSize, PtPbSize } from '@/ui/common/size.ts'
 import { HoverType } from '@/ui/common/type.ts'
 import { SelectEmits, SelectOptionProps, SelectProps } from '@/ui/select/types.ts'
 import { generateRandomId } from '@/utils/common.ts'
+import ShadcnSkeleton from '@/ui/skeleton'
 
 const emit = defineEmits<SelectEmits>()
 
@@ -93,7 +100,8 @@ const props = withDefaults(defineProps<SelectProps>(), {
   type: 'primary',
   multiple: false,
   border: true,
-  lazy: false
+  lazy: false,
+  loading: false
 })
 
 const isExpanded = ref(false)
@@ -259,13 +267,9 @@ provide('selectContext', {
 
 onMounted(() => {
   document.addEventListener('click', onClickOutside)
-  // isExpanded.value = true
-  // nextTick(() => {
-  //   isExpanded.value = false
-  // })
 })
 
 onUnmounted(() => {
   document.removeEventListener('click', onClickOutside)
 })
-</script>
+</script>
\ No newline at end of file
diff --git a/src/ui/select/types.ts b/src/ui/select/types.ts
index ee693576..fe457432 100644
--- a/src/ui/select/types.ts
+++ b/src/ui/select/types.ts
@@ -12,6 +12,7 @@ export interface SelectProps
     multiple?: boolean
     border?: boolean
     lazy?: boolean
+    loading?: boolean
     loadData?: (callback: (children: SelectOptionProps[]) => void) => void
 }
 
diff --git a/src/ui/skeleton/item/ShadcnSkeletonItem.vue b/src/ui/skeleton/item/ShadcnSkeletonItem.vue
index 7eb68528..c47a36da 100644
--- a/src/ui/skeleton/item/ShadcnSkeletonItem.vue
+++ b/src/ui/skeleton/item/ShadcnSkeletonItem.vue
@@ -40,7 +40,7 @@ const skeletonShapeClass = computed(() => {
     case 'square':
       return 'rounded aspect-square'
     case 'rect':
-      return `rounded w-full h-4`
+      return `rounded w-full h-8`
     case 'image':
       return `rounded-md ${ SkeletonSize[props.size] }`
   }

From 4a4447f1f407abc39e1741ed9ace11484e7f7b44 Mon Sep 17 00:00:00 2001
From: qianmoQ <shicheng@devlive.org>
Date: Sat, 11 Jan 2025 00:11:59 +0800
Subject: [PATCH 5/5] =?UTF-8?q?=E7=BB=84=E4=BB=B6(=E9=AA=A8=E6=9E=B6?=
 =?UTF-8?q?=E5=B1=8F):=20=E6=94=AF=E6=8C=81=E5=B0=BA=E5=AF=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/.vitepress/config.js                     |  2 +-
 docs/components/layout/skeleton.md            | 58 ++++++++++---------
 packages/index.ts                             |  9 +--
 src/App.vue                                   | 13 ++---
 src/ui/common/size.ts                         | 14 ++++-
 src/ui/select/ShadcnSelect.vue                |  4 +-
 src/ui/skeleton/ShadcnSkeleton.vue            | 16 +++--
 .../{item => }/ShadcnSkeletonItem.vue         | 21 ++-----
 src/ui/skeleton/index.ts                      |  5 +-
 src/ui/skeleton/item/index.ts                 |  3 -
 src/ui/skeleton/types.ts                      | 19 ++++++
 11 files changed, 85 insertions(+), 79 deletions(-)
 rename src/ui/skeleton/{item => }/ShadcnSkeletonItem.vue (74%)
 delete mode 100644 src/ui/skeleton/item/index.ts
 create mode 100644 src/ui/skeleton/types.ts

diff --git a/docs/.vitepress/config.js b/docs/.vitepress/config.js
index ad223997..dbd07578 100644
--- a/docs/.vitepress/config.js
+++ b/docs/.vitepress/config.js
@@ -155,7 +155,7 @@ export default {
                         {text: 'Ellipsis', link: 'layout/ellipsis', icon: '/components/layout/ellipsis.svg', version: '2024.1.2'},
                         {text: 'Avatar', link: 'layout/avatar', icon: '/components/layout/avatar.svg', version: '2024.1.2'},
                         {text: 'Space', link: 'layout/space', icon: '/components/layout/space.svg', version: '2024.1.2'},
-                        {text: 'Skeleton', link: 'layout/skeleton', icon: '/components/layout/skeleton.svg', version: '2024.1.2'},
+                        {text: '骨架屏 (Skeleton)', link: 'layout/skeleton', icon: '/components/layout/skeleton.svg', version: '2024.1.2'},
                         {text: 'Layout', link: 'layout/layout', icon: '/components/layout/layout.svg', version: '2024.1.2'},
                         {text: 'Collapse', link: 'layout/collapse', icon: '/components/layout/collapse.svg', version: '2024.2.0'},
                         {text: 'Global Footer', link: 'layout/global-footer', icon: '/components/layout/global-footer.svg', version: '2024.2.0'},
diff --git a/docs/components/layout/skeleton.md b/docs/components/layout/skeleton.md
index 83ef69a8..6cd2dfea 100644
--- a/docs/components/layout/skeleton.md
+++ b/docs/components/layout/skeleton.md
@@ -1,10 +1,12 @@
 ---
-title: Shadcn Skeleton
+title: 骨架屏 (Skeleton)
 ---
 
 # 介绍
 
-This document is mainly used to describe some features and usage of the ShadcnSkeleton component.
+<br />
+
+本文档主要用于描述 `ShadcnSkeleton` 组件的一些特性和用法。
 
 ## 用法
 
@@ -25,9 +27,9 @@ This document is mainly used to describe some features and usage of the ShadcnSk
 
 :::
 
-## Animation
+## 动画 (animation)
 
-<CodeRunner title="Animation">
+<CodeRunner title="动画 (animation)">
     <ShadcnSkeleton animation />
 </CodeRunner>
 
@@ -44,9 +46,9 @@ This document is mainly used to describe some features and usage of the ShadcnSk
 
 :::
 
-## Paragraph
+## 排版 (paragraph)
 
-<CodeRunner title="Title">
+<CodeRunner title="排版 (paragraph)">
     <ShadcnSkeleton :paragraph=" { rows: 5, width: [100, 200, '300px', '50%', '62%'] }"/>
 </CodeRunner>
 
@@ -63,9 +65,9 @@ This document is mainly used to describe some features and usage of the ShadcnSk
 
 :::
 
-## Item Type
+## 类型 (type)
 
-<CodeRunner title="Item Type">
+<CodeRunner title="类型 (type)">
     <ShadcnSpace>
         <ShadcnSkeletonItem animation type="circle"/>
         <ShadcnSkeletonItem animation type="square"/>
@@ -91,9 +93,9 @@ This document is mainly used to describe some features and usage of the ShadcnSk
 
 :::
 
-## Item Size
+## 尺寸 (size)
 
-<CodeRunner title="Item Size">
+<CodeRunner title="尺寸 (size)">
     <ShadcnSpace>
         <ShadcnSkeletonItem animation type="image" size="small"/>
         <ShadcnSkeletonItem animation type="image" size="default"/>
@@ -116,35 +118,35 @@ This document is mainly used to describe some features and usage of the ShadcnSk
 
 :::
 
-## API Attributes
+## 骨架屏 (Skeleton) 属性
 
-<ApiTable title="Skeleton Props"
-    :headers="['属性', '描述', '类型', '默认值', '依赖', '支持列表']"
+<ApiTable title="骨架屏 (Skeleton) 属性"
+    :headers="['属性', '描述', '类型', '默认值']"
     :columns="[
-        ['rows', 'The rows of the skeleton', 'Number | String', '4', '-', '-'],
-        ['cols', 'The columns of the skeleton', 'Number | String', '1', '-', '-'],
-        ['animation', 'Whether to use animation', 'Boolean', 'false', '-', '-'],
-        ['paragraph', 'The paragraph of the skeleton', '{ rows: 5, width: \[100, 200, 300px, 50%, 62%\] }', '-', '-', '-'],
+        ['rows', '骨架的行数', 'number | string', '4'],
+        ['cols', '骨架的列数', 'number | string', '1'],
+        ['animation', '是否显示动画', 'boolean', 'false'],
+        ['paragraph', '骨架的排版', '{ rows: 5, width: \[100, 200, 300px, 50%, 62%\] }', '-'],
     ]">
 </ApiTable>
 
-<br />
+## 骨架屏节点 (Skeleton Item) 属性
 
-<ApiTable title="Skeleton Item Props"
-    :headers="['属性', '描述', '类型', '默认值', '依赖', '支持列表']"
+<ApiTable title="骨架屏节点 (Skeleton Item) 属性"
+    :headers="['属性', '描述', '类型', '默认值', '支持列表']"
     :columns="[
-        ['animation', 'Whether to use animation', 'Boolean', 'false', '-', '-'],
-        ['width', 'The width of the skeleton item', 'Number | String', '-', '-', '-'],
-        ['type', 'The type of the skeleton item', 'Enum', 'rect', '-', 'circle | square | rect | image'],
-        ['size', 'The size of the skeleton item', 'Enum', 'default', '-', 'small | default | large'],
+        ['animation', '是否显示动画', 'Boolean', 'false', '-'],
+        ['width', '节点的宽度', 'Number | String', '-', '-'],
+        ['type', '节点的类型', 'Enum', 'rect', 'circle | square | rect | image'],
+        ['size', '节点的尺寸', 'Enum', 'default', 'small | default | large'],
     ]">
 </ApiTable>
 
-<br />
+## 骨架屏 (Skeleton) 插槽
 
-<ApiTable title="Skeleton Slots"
+<ApiTable title="骨架屏 (Skeleton) 插槽"
     :headers="['插槽', '描述']" 
     :columns="[
-        ['template', 'Skeleton template slot'],
+        ['template', '骨架的模板'],
     ]">
-</ApiTable>
+</ApiTable>
\ No newline at end of file
diff --git a/packages/index.ts b/packages/index.ts
index be2d3bfb..51e170a1 100644
--- a/packages/index.ts
+++ b/packages/index.ts
@@ -35,8 +35,7 @@ import ShadcnSelectGroup from '@/ui/select/group'
 import ShadcnRate from '@/ui/rate'
 import ShadcnTab from '@/ui/tab'
 import ShadcnTabItem from '@/ui/tab/item'
-import ShadcnSkeleton from '@/ui/skeleton'
-import ShadcnSkeletonItem from '@/ui/skeleton/item'
+import { ShadcnSkeleton, ShadcnSkeletonItem } from '@/ui/skeleton'
 import ShadcnLayout from '@/ui/layout'
 import ShadcnLayoutHeader from '@/ui/layout/header'
 import ShadcnLayoutContent from '@/ui/layout/content'
@@ -133,8 +132,7 @@ let components = [
     ShadcnRate,
     ShadcnTab,
     ShadcnTabItem,
-    ShadcnSkeleton,
-    ShadcnSkeletonItem,
+    ShadcnSkeleton, ShadcnSkeletonItem,
     ShadcnLayout,
     ShadcnLayoutHeader,
     ShadcnLayoutContent,
@@ -266,8 +264,7 @@ export { default as ShadcnSelectGroup } from '@/ui/select/group'
 export { default as ShadcnRate } from '@/ui/rate'
 export { default as ShadcnTab } from '@/ui/tab'
 export { default as ShadcnTabItem } from '@/ui/tab/item'
-export { default as ShadcnSkeleton } from '@/ui/skeleton'
-export { default as ShadcnSkeletonItem } from '@/ui/skeleton/item'
+export { ShadcnSkeleton, ShadcnSkeletonItem } from '@/ui/skeleton'
 export { default as ShadcnLayout } from '@/ui/layout'
 export { default as ShadcnLayoutHeader } from '@/ui/layout/header'
 export { default as ShadcnLayoutContent } from '@/ui/layout/content'
diff --git a/src/App.vue b/src/App.vue
index eeac9fff..9e889bc8 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,18 +1,13 @@
 <template>
   <div class="p-32 space-y-7 space-x-4">
     <div class="p-2 flex flex-col space-y-4 min-h-60 space-x-6 overflow-x-auto">
-      <ShadcnSelect v-model="defaultSelect" :options="defaultSelectOptions" loading />
+      <ShadcnSkeletonItem animation type="circle"/>
+      <ShadcnSkeletonItem animation type="square"/>
+      <ShadcnSkeletonItem animation type="rect"/>
+      <ShadcnSkeletonItem animation type="image"/>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
-
-const defaultSelect = ref(null)
-const defaultSelectOptions = [
-  { label: 'Vue', value: 'Vue' },
-  { label: 'Nuxt', value: 'Nuxt', disabled: true },
-  { label: 'Svelte', value: 'Svelte' }
-]
 </script>
\ No newline at end of file
diff --git a/src/ui/common/size.ts b/src/ui/common/size.ts
index 8effbb16..b0d76e53 100644
--- a/src/ui/common/size.ts
+++ b/src/ui/common/size.ts
@@ -1,3 +1,10 @@
+export enum BaseSize
+{
+    default = 'h-8',
+    small = 'h-6',
+    large = 'h-10'
+}
+
 export enum Size
 {
     default = 'h-8',
@@ -34,9 +41,10 @@ export enum TabSize
 
 export enum SkeletonSize
 {
-    default = 'h-10 w-10',
-    small = 'h-8 w-8',
-    large = 'h-16 w-16'
+    mini = 'h-4',
+    default = BaseSize.default,
+    small = BaseSize.small,
+    large = BaseSize.large
 }
 
 export enum ButtonSize
diff --git a/src/ui/select/ShadcnSelect.vue b/src/ui/select/ShadcnSelect.vue
index 7712e66c..d7cc83b3 100644
--- a/src/ui/select/ShadcnSelect.vue
+++ b/src/ui/select/ShadcnSelect.vue
@@ -4,7 +4,7 @@
                   border && 'border border-gray-200',
                   MinSize[size]
          ]">
-      <ShadcnSkeleton animation :rows="1" class="w-full"/>
+      <ShadcnSkeleton animation :rows="1" :size="size" class="w-full"/>
     </div>
     <div v-else :class="['flex rounded-md px-2 relative',
                   border && 'border border-gray-200 hover:border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2',
@@ -89,7 +89,7 @@ import { MinSize, PtPbSize } from '@/ui/common/size.ts'
 import { HoverType } from '@/ui/common/type.ts'
 import { SelectEmits, SelectOptionProps, SelectProps } from '@/ui/select/types.ts'
 import { generateRandomId } from '@/utils/common.ts'
-import ShadcnSkeleton from '@/ui/skeleton'
+import { ShadcnSkeleton } from '@/ui/skeleton'
 
 const emit = defineEmits<SelectEmits>()
 
diff --git a/src/ui/skeleton/ShadcnSkeleton.vue b/src/ui/skeleton/ShadcnSkeleton.vue
index 6255d30c..358e538e 100644
--- a/src/ui/skeleton/ShadcnSkeleton.vue
+++ b/src/ui/skeleton/ShadcnSkeleton.vue
@@ -4,6 +4,7 @@
       <ShadcnSkeletonItem v-for="(width, index) in itemWidths"
                           :key="index"
                           :width="width"
+                          :size="size"
                           :animation="animation"/>
     </slot>
   </div>
@@ -11,17 +12,14 @@
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import ShadcnSkeletonItem from '@/ui/skeleton/item'
+import ShadcnSkeletonItem from './ShadcnSkeletonItem.vue'
+import { SkeletonProps } from './types'
 
-const props = withDefaults(defineProps<{
-  cols?: number | string
-  rows?: number | string
-  animation?: boolean
-  paragraph?: { rows: number, width: (number | string)[] }
-}>(), {
+const props = withDefaults(defineProps<SkeletonProps>(), {
   cols: 1,
   rows: 4,
-  animation: false
+  animation: false,
+  size: 'mini'
 })
 
 const addPxIfNumber = (value: number | string): string => {
@@ -39,4 +37,4 @@ const itemWidths = computed(() => {
                 .map(() => (props.cols === 1 ? '100%' : `${ 100 / Number(props.cols) }%`))
   }
 })
-</script>
+</script>
\ No newline at end of file
diff --git a/src/ui/skeleton/item/ShadcnSkeletonItem.vue b/src/ui/skeleton/ShadcnSkeletonItem.vue
similarity index 74%
rename from src/ui/skeleton/item/ShadcnSkeletonItem.vue
rename to src/ui/skeleton/ShadcnSkeletonItem.vue
index c47a36da..ccbb2a14 100644
--- a/src/ui/skeleton/item/ShadcnSkeletonItem.vue
+++ b/src/ui/skeleton/ShadcnSkeletonItem.vue
@@ -19,15 +19,10 @@
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import { SkeletonType } from '@/ui/common/type.ts'
 import { SkeletonSize } from '@/ui/common/size.ts'
+import { SkeletonItemProps } from '@/ui/skeleton/types.ts'
 
-const props = withDefaults(defineProps<{
-  animation?: boolean
-  width?: string
-  type?: keyof typeof SkeletonType
-  size?: keyof typeof SkeletonSize
-}>(), {
+const props = withDefaults(defineProps<SkeletonItemProps>(), {
   animation: false,
   type: 'rect',
   size: 'default'
@@ -36,21 +31,17 @@ const props = withDefaults(defineProps<{
 const skeletonShapeClass = computed(() => {
   switch (props.type) {
     case 'circle':
-      return 'rounded-full aspect-square'
+      return `rounded-full aspect-square ${ SkeletonSize[props.size] }`
     case 'square':
-      return 'rounded aspect-square'
+      return `rounded aspect-square ${ SkeletonSize[props.size] }`
     case 'rect':
-      return `rounded w-full h-8`
+      return `rounded w-full ${ SkeletonSize[props.size] }`
     case 'image':
       return `rounded-md ${ SkeletonSize[props.size] }`
   }
 })
 
 const skeletonClass = computed(() => {
-  // type 为 rect 时强制设置宽度为 w-full
-  if (props.type === 'rect') {
-    return 'w-full'
-  }
   return SkeletonSize[props.size] || SkeletonSize.default
 })
-</script>
+</script>
\ No newline at end of file
diff --git a/src/ui/skeleton/index.ts b/src/ui/skeleton/index.ts
index 0f817274..c1208c87 100644
--- a/src/ui/skeleton/index.ts
+++ b/src/ui/skeleton/index.ts
@@ -1,3 +1,2 @@
-import ShadcnSkeleton from './ShadcnSkeleton.vue'
-
-export default ShadcnSkeleton
+export { default as ShadcnSkeleton } from './ShadcnSkeleton.vue'
+export { default as ShadcnSkeletonItem } from './ShadcnSkeletonItem.vue'
\ No newline at end of file
diff --git a/src/ui/skeleton/item/index.ts b/src/ui/skeleton/item/index.ts
deleted file mode 100644
index a7ef7554..00000000
--- a/src/ui/skeleton/item/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import ShadcnSkeletonItem from './ShadcnSkeletonItem.vue'
-
-export default ShadcnSkeletonItem
diff --git a/src/ui/skeleton/types.ts b/src/ui/skeleton/types.ts
new file mode 100644
index 00000000..94cbd3da
--- /dev/null
+++ b/src/ui/skeleton/types.ts
@@ -0,0 +1,19 @@
+import { SkeletonType } from '@/ui/common/type.ts'
+import { SkeletonSize } from '@/ui/common/size.ts'
+
+export interface SkeletonProps
+{
+    cols?: number | string
+    rows?: number | string
+    animation?: boolean
+    size?: keyof typeof SkeletonSize
+    paragraph?: { rows: number, width: (number | string)[] }
+}
+
+export interface SkeletonItemProps
+{
+    animation?: boolean
+    width?: string
+    type?: keyof typeof SkeletonType
+    size?: keyof typeof SkeletonSize
+}
\ No newline at end of file