From 3aee62c2a19d1c710ab3580b2dc78032b71b7123 Mon Sep 17 00:00:00 2001
From: qianmoQ <shicheng@devlive.org>
Date: Sun, 12 Jan 2025 19:44:14 +0800
Subject: [PATCH 01/27] =?UTF-8?q?=E7=BB=84=E4=BB=B6(=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E8=A1=A8=E6=A0=BC):=20=E6=B7=BB=E5=8A=A0=E5=9F=BA=E6=9C=AC?=
 =?UTF-8?q?=E8=A1=A8=E6=A0=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/.vitepress/config.js                    |  1 +
 docs/components/data/data-table.md           | 39 ++++++++++++++++++++
 packages/index.ts                            |  5 ++-
 src/App.vue                                  | 29 +++++++++++----
 src/ui/data-table/ShadcnDataTable.vue        | 16 ++++++++
 src/ui/data-table/components/TableBody.vue   | 22 +++++++++++
 src/ui/data-table/components/TableHeader.vue | 19 ++++++++++
 src/ui/data-table/index.ts                   |  1 +
 src/ui/data-table/types.ts                   | 15 ++++++++
 9 files changed, 138 insertions(+), 9 deletions(-)
 create mode 100644 docs/components/data/data-table.md
 create mode 100644 src/ui/data-table/ShadcnDataTable.vue
 create mode 100644 src/ui/data-table/components/TableBody.vue
 create mode 100644 src/ui/data-table/components/TableHeader.vue
 create mode 100644 src/ui/data-table/index.ts
 create mode 100644 src/ui/data-table/types.ts

diff --git a/docs/.vitepress/config.js b/docs/.vitepress/config.js
index 6d0eb30a..a522c717 100644
--- a/docs/.vitepress/config.js
+++ b/docs/.vitepress/config.js
@@ -282,6 +282,7 @@ export default {
                         {text: '数据构建 (Data Builder)', link: 'data/data-builder', icon: '/components/data/data-builder.svg', version: '2024.5.0'},
                         {text: '流程 (Workflow)', link: 'data/workflow', icon: '/components/data/workflow.svg', version: '2024.5.1'},
                         {text: '数据过滤 (Data Filter)', link: 'data/data-filter', icon: '/components/data/data-filter.svg', version: '2024.5.2'},
+                        {text: '数据表格 (Data Table)', link: 'data/data-table', icon: '/components/data/data-table.svg', version: '2025.1.1'},
                     ]
 
                     return {
diff --git a/docs/components/data/data-table.md b/docs/components/data/data-table.md
new file mode 100644
index 00000000..cf00f448
--- /dev/null
+++ b/docs/components/data/data-table.md
@@ -0,0 +1,39 @@
+---
+title: 数据表格 (Data Table)
+---
+
+# 介绍
+
+<br />
+
+本文档主要用于描述 `ShadcnDataTable` 组件的一些功能和用法。
+
+## 用法
+
+::: raw
+
+<CodeRunner title="用法">
+    <ShadcnDataTable :columns="columns" :data="data">
+    </ShadcnDataTable>
+</CodeRunner>
+
+:::
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const columns = ref<any[]>([
+  { key: 'name', label: '姓名' },
+  { key: 'age', label: '年龄' },
+  { key: 'address', label: '地址' }
+])
+
+const data = ref([
+  { name: '张三', age: 18, address: '北京' },
+  { name: '李四', age: 20, address: '上海' }
+])
+
+const handleChange = () => {
+  console.log('表格数据发生变化')
+}
+</script>
\ No newline at end of file
diff --git a/packages/index.ts b/packages/index.ts
index 228f82e7..c7bf38c6 100644
--- a/packages/index.ts
+++ b/packages/index.ts
@@ -99,6 +99,7 @@ import { ShadcnContribution } from '@/ui/contribution'
 import { ShadcnMention } from '@/ui/mention'
 import { ShadcnImage, ShadcnImageGroup, ShadcnImageViewer } from '@/ui/image'
 import { ShadcnCarousel } from '@/ui/carousel'
+import { ShadcnDataTable } from '@/ui/data-table'
 
 let components = [
     ShadcnButton,
@@ -194,7 +195,8 @@ let components = [
     ShadcnContribution,
     ShadcnMention,
     ShadcnImage, ShadcnImageGroup, ShadcnImageViewer,
-    ShadcnCarousel
+    ShadcnCarousel,
+    ShadcnDataTable
 ]
 
 interface InstallOptions
@@ -326,6 +328,7 @@ export { ShadcnContribution } from '@/ui/contribution'
 export { ShadcnMention } from '@/ui/mention'
 export { ShadcnImage, ShadcnImageGroup, ShadcnImageViewer } from '@/ui/image'
 export { ShadcnCarousel } from '@/ui/carousel'
+export { ShadcnDataTable } from '@/ui/data-table'
 
 // Export functions
 export { fnToString, fnToFunction } from '@/utils/formatter'
diff --git a/src/App.vue b/src/App.vue
index 9cefa2ca..b1446058 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,14 +1,27 @@
 <template>
-  <div class="p-32 flex-col gap-4">
-    <ShadcnButton circle size="large">
-      <ShadcnIcon icon="Pencil" :size="15"/>
-    </ShadcnButton>
-    <ShadcnButton type="danger" circle></ShadcnButton>
-    <ShadcnButton type="success" size="small" circle></ShadcnButton>
-
-    <ShadcnButton type="primary">Primary</ShadcnButton>
+  <div class="p-32">
+    <ShadcnDataTable :columns="columns"
+                     :data="tableData"
+                     @on-change="handleChange">
+    </ShadcnDataTable>
   </div>
 </template>
 
 <script setup lang="ts">
+import { ref } from 'vue'
+
+const columns = ref<any[]>([
+  { key: 'name', label: '姓名' },
+  { key: 'age', label: '年龄' },
+  { key: 'address', label: '地址' }
+])
+
+const tableData = ref([
+  { name: '张三', age: 18, address: '北京' },
+  { name: '李四', age: 20, address: '上海' }
+])
+
+const handleChange = () => {
+  console.log('表格数据发生变化')
+}
 </script>
\ No newline at end of file
diff --git a/src/ui/data-table/ShadcnDataTable.vue b/src/ui/data-table/ShadcnDataTable.vue
new file mode 100644
index 00000000..f2cc360c
--- /dev/null
+++ b/src/ui/data-table/ShadcnDataTable.vue
@@ -0,0 +1,16 @@
+<template>
+  <div class="w-full">
+    <table class="w-full border-collapse">
+      <TableHeader :columns="columns"/>
+      <TableBody :columns="columns" :data="data"/>
+    </table>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { DataTableProps } from './types'
+import TableHeader from '@/ui/data-table/components/TableHeader.vue'
+import TableBody from '@/ui/data-table/components/TableBody.vue'
+
+defineProps<DataTableProps>()
+</script>
\ No newline at end of file
diff --git a/src/ui/data-table/components/TableBody.vue b/src/ui/data-table/components/TableBody.vue
new file mode 100644
index 00000000..efb14091
--- /dev/null
+++ b/src/ui/data-table/components/TableBody.vue
@@ -0,0 +1,22 @@
+<template>
+  <tbody>
+  <tr v-for="(row, index) in data"
+      :key="index"
+      class="border-b hover:bg-gray-50">
+    <td v-for="col in columns"
+        :key="col.key"
+        class="px-4 py-2">
+      {{ row[col.key] }}
+    </td>
+  </tr>
+  </tbody>
+</template>
+
+<script setup lang="ts">
+import type { ColumnProps } from '../types'
+
+defineProps<{
+  columns: ColumnProps[]
+  data: Record<string, any>[]
+}>()
+</script>
\ No newline at end of file
diff --git a/src/ui/data-table/components/TableHeader.vue b/src/ui/data-table/components/TableHeader.vue
new file mode 100644
index 00000000..72a77690
--- /dev/null
+++ b/src/ui/data-table/components/TableHeader.vue
@@ -0,0 +1,19 @@
+<template>
+  <thead>
+  <tr class="border-b">
+    <th v-for="col in columns"
+        :key="col.key"
+        class="px-4 py-2 text-left font-medium">
+      {{ col.label }}
+    </th>
+  </tr>
+  </thead>
+</template>
+
+<script setup lang="ts">
+import type { ColumnProps } from '../types'
+
+defineProps<{
+  columns: ColumnProps[]
+}>()
+</script>
\ No newline at end of file
diff --git a/src/ui/data-table/index.ts b/src/ui/data-table/index.ts
new file mode 100644
index 00000000..456e98f1
--- /dev/null
+++ b/src/ui/data-table/index.ts
@@ -0,0 +1 @@
+export { default as ShadcnDataTable } from './ShadcnDataTable.vue'
\ No newline at end of file
diff --git a/src/ui/data-table/types.ts b/src/ui/data-table/types.ts
new file mode 100644
index 00000000..71f60a3e
--- /dev/null
+++ b/src/ui/data-table/types.ts
@@ -0,0 +1,15 @@
+export interface ColumnProps
+{
+    key: string
+    label: string
+}
+
+export interface DataTableProps
+{
+    columns: ColumnProps[]
+    data: Record<string, any>[]
+}
+
+export type DataTableEmits = {
+    (e: 'on-change'): void
+}
\ No newline at end of file

From 5b83db7c7025e50039492b55b333f6ba8e44b603 Mon Sep 17 00:00:00 2001
From: qianmoQ <shicheng@devlive.org>
Date: Sun, 12 Jan 2025 20:04:09 +0800
Subject: [PATCH 02/27] =?UTF-8?q?=E7=BB=84=E4=BB=B6(=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E8=A1=A8=E6=A0=BC):=20=E6=B7=BB=E5=8A=A0=E5=B0=BA=E5=AF=B8?=
 =?UTF-8?q?=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/components/data/data-table.md           | 84 +++++++++++++++++++-
 src/App.vue                                  | 31 +++++---
 src/ui/data-table/ShadcnDataTable.vue        | 13 +--
 src/ui/data-table/components/TableBody.vue   | 17 ++--
 src/ui/data-table/components/TableHeader.vue | 12 ++-
 src/ui/data-table/size.ts                    | 10 +++
 src/ui/data-table/types.ts                   |  3 +
 7 files changed, 143 insertions(+), 27 deletions(-)
 create mode 100644 src/ui/data-table/size.ts

diff --git a/docs/components/data/data-table.md b/docs/components/data/data-table.md
index cf00f448..0c6d881a 100644
--- a/docs/components/data/data-table.md
+++ b/docs/components/data/data-table.md
@@ -12,13 +12,95 @@ title: 数据表格 (Data Table)
 
 ::: raw
 
-<CodeRunner title="用法">
+<CodeRunner title="用法" codeKey="usage">
     <ShadcnDataTable :columns="columns" :data="data">
     </ShadcnDataTable>
 </CodeRunner>
 
 :::
 
+::: details 查看代码
+
+```vue
+<template>
+    <ShadcnDataTable :columns="columns" :data="data">
+    </ShadcnDataTable>
+</template>
+```
+
+:::
+
+## 尺寸 (size)
+
+::: raw
+
+<CodeRunner title="尺寸 (size)" codeKey="size">
+  <div class="space-y-4">
+    <div>
+      <ShadcnDivider orientation="left">小尺寸</ShadcnDivider>
+      <ShadcnDataTable :columns="columns"
+                       :data="data"
+                       size="small">
+      </ShadcnDataTable>
+    </div>
+    <div>
+      <ShadcnDivider orientation="left">默认尺寸</ShadcnDivider>
+      <ShadcnDataTable :columns="columns" :data="data">
+      </ShadcnDataTable>
+    </div>
+    <div>
+      <ShadcnDivider orientation="left">大尺寸</ShadcnDivider>
+      <ShadcnDataTable :columns="columns"
+                       :data="data" 
+                       size="large">
+      </ShadcnDataTable>
+    </div>
+  </div>
+</CodeRunner>
+
+:::
+
+::: details 查看代码
+
+```vue
+<template>
+  <div class="space-y-4">
+    <div>
+      <ShadcnDivider orientation="left">小尺寸</ShadcnDivider>
+      <ShadcnDataTable :columns="columns"
+                       :data="data"
+                       size="small">
+      </ShadcnDataTable>
+    </div>
+    <div>
+      <ShadcnDivider orientation="left">默认尺寸</ShadcnDivider>
+      <ShadcnDataTable :columns="columns" :data="data">
+      </ShadcnDataTable>
+    </div>
+    <div>
+      <ShadcnDivider orientation="left">大尺寸</ShadcnDivider>
+      <ShadcnDataTable :columns="columns"
+                       :data="data"
+                       size="large">
+      </ShadcnDataTable>
+    </div>
+  </div>
+</template>
+```
+
+:::
+
+## 数据表格 (Data Table) 属性
+
+<ApiTable title="数据表格 (Data Table) 属性"
+    :headers="['属性', '描述', '类型', '默认值', '支持列表']"
+    :columns="[
+        ['columns', '表格列数据', '\[\]', '\[\]', '-'],
+        ['data', '表格数据', '\[\]', '\[\]', '-'],
+        ['size', '表格尺寸', 'enum', 'default', 'default | small | large'],
+    ]">
+</ApiTable>
+
 <script setup lang="ts">
 import { ref } from 'vue'
 
diff --git a/src/App.vue b/src/App.vue
index b1446058..0e3e4d6e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,9 +1,24 @@
 <template>
-  <div class="p-32">
-    <ShadcnDataTable :columns="columns"
-                     :data="tableData"
-                     @on-change="handleChange">
-    </ShadcnDataTable>
+  <div class="p-32 space-y-4">
+    <div>
+      <ShadcnDivider orientation="left">小尺寸</ShadcnDivider>
+      <ShadcnDataTable :columns="columns"
+                       :data="data"
+                       size="small">
+      </ShadcnDataTable>
+    </div>
+    <div>
+      <ShadcnDivider orientation="left">默认尺寸</ShadcnDivider>
+      <ShadcnDataTable :columns="columns" :data="data">
+      </ShadcnDataTable>
+    </div>
+    <div>
+      <ShadcnDivider orientation="left">大尺寸</ShadcnDivider>
+      <ShadcnDataTable :columns="columns"
+                       :data="data"
+                       size="large">
+      </ShadcnDataTable>
+    </div>
   </div>
 </template>
 
@@ -16,12 +31,8 @@ const columns = ref<any[]>([
   { key: 'address', label: '地址' }
 ])
 
-const tableData = ref([
+const data = ref([
   { name: '张三', age: 18, address: '北京' },
   { name: '李四', age: 20, address: '上海' }
 ])
-
-const handleChange = () => {
-  console.log('表格数据发生变化')
-}
 </script>
\ No newline at end of file
diff --git a/src/ui/data-table/ShadcnDataTable.vue b/src/ui/data-table/ShadcnDataTable.vue
index f2cc360c..2bc9f97b 100644
--- a/src/ui/data-table/ShadcnDataTable.vue
+++ b/src/ui/data-table/ShadcnDataTable.vue
@@ -1,16 +1,17 @@
 <template>
   <div class="w-full">
     <table class="w-full border-collapse">
-      <TableHeader :columns="columns"/>
-      <TableBody :columns="columns" :data="data"/>
+      <TableHeader :columns="columns" :size="size"/>
+      <TableBody :columns="columns" :data="data" :size="size"/>
     </table>
   </div>
 </template>
 
 <script setup lang="ts">
+import TableHeader from './components/TableHeader.vue'
+import TableBody from './components/TableBody.vue'
 import type { DataTableProps } from './types'
-import TableHeader from '@/ui/data-table/components/TableHeader.vue'
-import TableBody from '@/ui/data-table/components/TableBody.vue'
 
-defineProps<DataTableProps>()
-</script>
\ No newline at end of file
+withDefaults(defineProps<DataTableProps>(), {
+  size: 'default'
+})</script>
\ No newline at end of file
diff --git a/src/ui/data-table/components/TableBody.vue b/src/ui/data-table/components/TableBody.vue
index efb14091..021671a8 100644
--- a/src/ui/data-table/components/TableBody.vue
+++ b/src/ui/data-table/components/TableBody.vue
@@ -2,10 +2,12 @@
   <tbody>
   <tr v-for="(row, index) in data"
       :key="index"
-      class="border-b hover:bg-gray-50">
+      :class="[ 'border-b hover:bg-gray-50',
+        BaseSize[size]
+      ]">
     <td v-for="col in columns"
         :key="col.key"
-        class="px-4 py-2">
+        :class="[TablePaddingSize[size]]">
       {{ row[col.key] }}
     </td>
   </tr>
@@ -13,10 +15,11 @@
 </template>
 
 <script setup lang="ts">
-import type { ColumnProps } from '../types'
+import { DataTableProps } from '../types'
+import { BaseSize } from '@/ui/common/size.ts'
+import { TablePaddingSize } from '@/ui/data-table/size.ts'
 
-defineProps<{
-  columns: ColumnProps[]
-  data: Record<string, any>[]
-}>()
+withDefaults(defineProps<DataTableProps>(), {
+  size: 'default'
+})
 </script>
\ No newline at end of file
diff --git a/src/ui/data-table/components/TableHeader.vue b/src/ui/data-table/components/TableHeader.vue
index 72a77690..f16edc9e 100644
--- a/src/ui/data-table/components/TableHeader.vue
+++ b/src/ui/data-table/components/TableHeader.vue
@@ -3,7 +3,9 @@
   <tr class="border-b">
     <th v-for="col in columns"
         :key="col.key"
-        class="px-4 py-2 text-left font-medium">
+        :class="['text-left font-medium',
+          TablePaddingSize[size]
+        ]">
       {{ col.label }}
     </th>
   </tr>
@@ -12,8 +14,12 @@
 
 <script setup lang="ts">
 import type { ColumnProps } from '../types'
+import { Size, TablePaddingSize } from '@/ui/data-table/size.ts'
 
-defineProps<{
+withDefaults(defineProps<{
   columns: ColumnProps[]
-}>()
+  size: Size
+}>(), {
+  size: 'default'
+})
 </script>
\ No newline at end of file
diff --git a/src/ui/data-table/size.ts b/src/ui/data-table/size.ts
new file mode 100644
index 00000000..6d882e3a
--- /dev/null
+++ b/src/ui/data-table/size.ts
@@ -0,0 +1,10 @@
+import { BaseSize } from '@/ui/common/size.ts'
+
+export enum TablePaddingSize
+{
+    default = 'px-4 py-2 text-base',
+    small = 'px-2 py-1 text-sm',
+    large = 'px-6 py-3 text-lg'
+}
+
+export type Size = keyof typeof BaseSize
\ No newline at end of file
diff --git a/src/ui/data-table/types.ts b/src/ui/data-table/types.ts
index 71f60a3e..831f4ddf 100644
--- a/src/ui/data-table/types.ts
+++ b/src/ui/data-table/types.ts
@@ -1,3 +1,5 @@
+import { Size } from './size'
+
 export interface ColumnProps
 {
     key: string
@@ -8,6 +10,7 @@ export interface DataTableProps
 {
     columns: ColumnProps[]
     data: Record<string, any>[]
+    size?: Size
 }
 
 export type DataTableEmits = {

From c72d0de8f4266f4b7c7d5550cdd2648424d77796 Mon Sep 17 00:00:00 2001
From: qianmoQ <shicheng@devlive.org>
Date: Sun, 12 Jan 2025 21:33:58 +0800
Subject: [PATCH 03/27] =?UTF-8?q?=E7=BB=84=E4=BB=B6(=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E8=A1=A8=E6=A0=BC):=20=E6=B7=BB=E5=8A=A0=E5=88=97=E6=8E=92?=
 =?UTF-8?q?=E5=BA=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/components/data/data-table.md           | 38 ++++++++++++
 src/App.vue                                  | 62 +++++++++++++-------
 src/ui/data-table/ShadcnDataTable.vue        | 51 ++++++++++++++--
 src/ui/data-table/components/TableHeader.vue | 38 +++++++++---
 src/ui/data-table/hooks/useSort.ts           | 49 ++++++++++++++++
 src/ui/data-table/types.ts                   |  8 ++-
 6 files changed, 211 insertions(+), 35 deletions(-)
 create mode 100644 src/ui/data-table/hooks/useSort.ts

diff --git a/docs/components/data/data-table.md b/docs/components/data/data-table.md
index 0c6d881a..bbb69c6f 100644
--- a/docs/components/data/data-table.md
+++ b/docs/components/data/data-table.md
@@ -90,6 +90,17 @@ title: 数据表格 (Data Table)
 
 :::
 
+## 排序 (sort)
+
+::: raw
+
+<CodeRunner title="排序 (sort)" codeKey="sort">
+    <ShadcnDataTable :columns="sortColumns" :data="data">
+    </ShadcnDataTable>
+</CodeRunner>
+
+:::
+
 ## 数据表格 (Data Table) 属性
 
 <ApiTable title="数据表格 (Data Table) 属性"
@@ -101,6 +112,27 @@ title: 数据表格 (Data Table)
     ]">
 </ApiTable>
 
+<br />
+
+<ApiTable title="数据表格列 (Data Table Column) 属性"
+    :headers="['属性', '描述', '类型', '默认值', '支持列表']"
+    :columns="[
+        ['key', '列的 key 值', 'string', '-', '-'],
+        ['label', '列的标签', 'string', '-', '-'],
+        ['sort', '列的排序状态', 'enum', '-', 'asc | desc'],
+        ['sortable', '列是否可排序', 'boolean', 'false', '-'],
+    ]">
+</ApiTable>
+
+## 数据表格 (Data Table) 事件
+
+<ApiTable title="数据表格 (Data Table) 事件"
+    :headers="['事件', '描述', '回调参数']"
+    :columns="[
+        ['on-sort', '当表格排序发生变化时触发', '排序列的列表'],
+    ]">
+</ApiTable>
+
 <script setup lang="ts">
 import { ref } from 'vue'
 
@@ -110,6 +142,12 @@ const columns = ref<any[]>([
   { key: 'address', label: '地址' }
 ])
 
+const sortColumns = ref<any[]>([
+  { key: 'name', label: '姓名' },
+  { key: 'age', label: '年龄', sortable: true },
+  { key: 'address', label: '地址' }
+])
+
 const data = ref([
   { name: '张三', age: 18, address: '北京' },
   { name: '李四', age: 20, address: '上海' }
diff --git a/src/App.vue b/src/App.vue
index 0e3e4d6e..cb281caf 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,24 +1,10 @@
 <template>
   <div class="p-32 space-y-4">
-    <div>
-      <ShadcnDivider orientation="left">小尺寸</ShadcnDivider>
-      <ShadcnDataTable :columns="columns"
-                       :data="data"
-                       size="small">
-      </ShadcnDataTable>
-    </div>
-    <div>
-      <ShadcnDivider orientation="left">默认尺寸</ShadcnDivider>
-      <ShadcnDataTable :columns="columns" :data="data">
-      </ShadcnDataTable>
-    </div>
-    <div>
-      <ShadcnDivider orientation="left">大尺寸</ShadcnDivider>
-      <ShadcnDataTable :columns="columns"
-                       :data="data"
-                       size="large">
-      </ShadcnDataTable>
-    </div>
+    <ShadcnDataTable :columns="columns"
+                     :data="data"
+                     size="small"
+                     @on-sort="handleSort">
+    </ShadcnDataTable>
   </div>
 </template>
 
@@ -27,12 +13,46 @@ import { ref } from 'vue'
 
 const columns = ref<any[]>([
   { key: 'name', label: '姓名' },
-  { key: 'age', label: '年龄' },
-  { key: 'address', label: '地址' }
+  { key: 'age', label: '年龄', sortable: true },
+  { key: 'address', label: '地址', sortable: true }
 ])
 
 const data = ref([
   { name: '张三', age: 18, address: '北京' },
   { name: '李四', age: 20, address: '上海' }
 ])
+
+// 模拟服务器排序数据
+const mockData = [
+  { name: '张三', age: 18, address: '北京' },
+  { name: '李四', age: 20, address: '上海' },
+  { name: '王五', age: 25, address: '广州' },
+  { name: '赵六', age: 22, address: '深圳' }
+]
+
+const handleSort = async (sortColumns: any[]) => {
+  // 模拟服务器排序
+  setTimeout(() => {
+    const sortedData = [...mockData].sort((a, b) => {
+      for (const column of sortColumns) {
+        const aValue = a[column.key]
+        const bValue = b[column.key]
+        const order = column.sort === 'asc' ? 1 : -1
+
+        if (aValue === bValue) {
+          continue
+        }
+
+        if (typeof aValue === 'string') {
+          return aValue.localeCompare(bValue) * order
+        }
+        return (aValue - bValue) * order
+      }
+      return 0
+    })
+
+    // 更新表格数据
+    data.value = sortedData
+  }, 2000)
+}
 </script>
\ No newline at end of file
diff --git a/src/ui/data-table/ShadcnDataTable.vue b/src/ui/data-table/ShadcnDataTable.vue
index 2bc9f97b..07736222 100644
--- a/src/ui/data-table/ShadcnDataTable.vue
+++ b/src/ui/data-table/ShadcnDataTable.vue
@@ -1,17 +1,58 @@
 <template>
   <div class="w-full">
     <table class="w-full border-collapse">
-      <TableHeader :columns="columns" :size="size"/>
-      <TableBody :columns="columns" :data="data" :size="size"/>
+      <TableHeader :columns="columns"
+                   :size="size"
+                   @on-sort-change="handleSortChange"/>
+      <TableBody :columns="columns"
+                 :data="sortedData"
+                 :size="size"/>
     </table>
   </div>
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue'
 import TableHeader from './components/TableHeader.vue'
 import TableBody from './components/TableBody.vue'
-import type { DataTableProps } from './types'
+import type { ColumnProps, DataTableEmits, DataTableProps } from './types'
+import { useSort } from './hooks/useSort'
 
-withDefaults(defineProps<DataTableProps>(), {
+const props = withDefaults(defineProps<DataTableProps>(), {
   size: 'default'
-})</script>
\ No newline at end of file
+})
+
+const emits = defineEmits<DataTableEmits>()
+
+const { columns, toggleSort, getSortedColumns } = useSort(props.columns)
+
+const handleSortChange = (column: ColumnProps, event: MouseEvent) => {
+  toggleSort(column.key, event)
+  emits('on-sort', getSortedColumns())
+}
+
+const sortedData = computed(() => {
+  const sortColumns = getSortedColumns()
+  if (sortColumns.length === 0) {
+    return props.data
+  }
+
+  return [...props.data].sort((a, b) => {
+    for (const column of sortColumns) {
+      const aValue = a[column.key]
+      const bValue = b[column.key]
+      const order = column.sort === 'asc' ? 1 : -1
+
+      if (aValue === bValue) {
+        continue
+      }
+
+      if (typeof aValue === 'string') {
+        return aValue.localeCompare(bValue) * order
+      }
+      return (aValue - bValue) * order
+    }
+    return 0
+  })
+})
+</script>
\ No newline at end of file
diff --git a/src/ui/data-table/components/TableHeader.vue b/src/ui/data-table/components/TableHeader.vue
index f16edc9e..6db7523e 100644
--- a/src/ui/data-table/components/TableHeader.vue
+++ b/src/ui/data-table/components/TableHeader.vue
@@ -1,12 +1,27 @@
 <template>
   <thead>
-  <tr class="border-b">
+  <tr class="border-b bg-gray-100">
     <th v-for="col in columns"
         :key="col.key"
-        :class="['text-left font-medium',
-          TablePaddingSize[size]
-        ]">
-      {{ col.label }}
+        :class="[ 'text-left font-medium',
+            TablePaddingSize[size],
+            col.sortable && 'cursor-pointer select-none'
+          ]"
+        @click="col.sortable && handleSort(col, $event)">
+      <div class="inline-flex items-center">
+        <span>{{ col.label }}</span>
+        <div v-if="col.sortable"
+             class="inline-flex items-center ml-2 min-w-[1em]">
+          <ShadcnIcon :class="['font-semibold transition-transform',
+                          col.sort ? 'opacity-100' : 'opacity-0',
+                          col.sort === 'asc' && 'text-blue-500',
+                          col.sort === 'desc' && 'rotate-180 text-blue-500'
+                      ]"
+                      icon="MoveUp"
+                      size="16">
+          </ShadcnIcon>
+        </div>
+      </div>
     </th>
   </tr>
   </thead>
@@ -15,11 +30,20 @@
 <script setup lang="ts">
 import type { ColumnProps } from '../types'
 import { Size, TablePaddingSize } from '@/ui/data-table/size.ts'
+import ShadcnIcon from '@/ui/icon'
 
 withDefaults(defineProps<{
-  columns: ColumnProps[]
-  size: Size
+  columns: ColumnProps[],
+  size?: Size
 }>(), {
   size: 'default'
 })
+
+const emits = defineEmits<{
+  (e: 'on-sort-change', column: ColumnProps, event: MouseEvent): void
+}>()
+
+const handleSort = (column: ColumnProps, event: MouseEvent) => {
+  emits('on-sort-change', column, event)
+}
 </script>
\ No newline at end of file
diff --git a/src/ui/data-table/hooks/useSort.ts b/src/ui/data-table/hooks/useSort.ts
new file mode 100644
index 00000000..edf244b2
--- /dev/null
+++ b/src/ui/data-table/hooks/useSort.ts
@@ -0,0 +1,49 @@
+import { ref } from 'vue'
+import type { ColumnProps } from '../types'
+
+export const useSort = (initialColumns: ColumnProps[]) => {
+    const columns = ref(initialColumns)
+
+    const toggleSort = (key: string, event?: MouseEvent) => {
+        const column = columns.value.find(col => col.key === key)
+        if (!column || !column.sortable) {
+            return
+        }
+
+        // 多列排序需要按住 Shift 键
+        const keepOtherSorts = event?.shiftKey
+
+        // 如果不是按住 shift，则清除其他列的排序
+        if (!keepOtherSorts) {
+            columns.value.forEach(col => {
+                if (col.key !== key) {
+                    col.sort = null
+                }
+            })
+        }
+
+        // 切换当前列的排序状态
+        if (!column.sort) {
+            column.sort = 'asc'
+        }
+        else if (column.sort === 'asc') {
+            column.sort = 'desc'
+        }
+        else {
+            column.sort = null
+        }
+
+        return columns.value.filter(col => col.sort)
+    }
+
+    // 获取当前所有排序列
+    const getSortedColumns = () => {
+        return columns.value.filter(col => col.sort)
+    }
+
+    return {
+        columns,
+        toggleSort,
+        getSortedColumns
+    }
+}
\ No newline at end of file
diff --git a/src/ui/data-table/types.ts b/src/ui/data-table/types.ts
index 831f4ddf..9cfc07fe 100644
--- a/src/ui/data-table/types.ts
+++ b/src/ui/data-table/types.ts
@@ -1,9 +1,13 @@
-import { Size } from './size'
+import { Size } from '@/ui/data-table/size.ts'
+
+export type SortOrder = 'asc' | 'desc' | null
 
 export interface ColumnProps
 {
     key: string
     label: string
+    sortable?: boolean
+    sort?: SortOrder
 }
 
 export interface DataTableProps
@@ -14,5 +18,5 @@ export interface DataTableProps
 }
 
 export type DataTableEmits = {
-    (e: 'on-change'): void
+    (e: 'on-sort', column: ColumnProps[]): void
 }
\ No newline at end of file

From 5e6dc9a0ee3a201947907dfc88470683843be7a2 Mon Sep 17 00:00:00 2001
From: qianmoQ <shicheng@devlive.org>
Date: Sun, 12 Jan 2025 22:07:28 +0800
Subject: [PATCH 04/27] =?UTF-8?q?=E7=BB=84=E4=BB=B6(=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E8=A1=A8=E6=A0=BC):=20=E6=94=AF=E6=8C=81=E5=88=97=E5=86=85?=
 =?UTF-8?q?=E5=AE=B9=E8=87=AA=E5=8A=A8=E7=9C=81=E7=95=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/components/data/data-table.md         | 79 +++++++++++++++++---
 src/App.vue                                | 84 +++++++++++-----------
 src/ui/data-table/components/TableBody.vue |  5 +-
 src/ui/data-table/types.ts                 |  1 +
 4 files changed, 115 insertions(+), 54 deletions(-)

diff --git a/docs/components/data/data-table.md b/docs/components/data/data-table.md
index bbb69c6f..c2bca821 100644
--- a/docs/components/data/data-table.md
+++ b/docs/components/data/data-table.md
@@ -94,13 +94,24 @@ title: 数据表格 (Data Table)
 
 ::: raw
 
-<CodeRunner title="排序 (sort)" codeKey="sort">
+<CodeRunner title="排序 (sort)" codeKey="sort" warning="只需要在列上添加 sortable 属性即可，多列排序需要按住 Shift 键">
     <ShadcnDataTable :columns="sortColumns" :data="data">
     </ShadcnDataTable>
 </CodeRunner>
 
 :::
 
+## 列省略 (ellipsis)
+
+::: raw
+
+<CodeRunner title="列省略 (ellipsis)" codeKey="ellipsis" warning="只需要在列上添加 ellipsis 属性即可，默认会显示省略号">
+    <ShadcnDataTable :columns="ellipsisColumns" :data="data">
+    </ShadcnDataTable>
+</CodeRunner>
+
+:::
+
 ## 数据表格 (Data Table) 属性
 
 <ApiTable title="数据表格 (Data Table) 属性"
@@ -121,6 +132,7 @@ title: 数据表格 (Data Table)
         ['label', '列的标签', 'string', '-', '-'],
         ['sort', '列的排序状态', 'enum', '-', 'asc | desc'],
         ['sortable', '列是否可排序', 'boolean', 'false', '-'],
+        ['ellipsis', '列内容是否省略，超出时显示省略号', 'boolean', 'true', '-'],
     ]">
 </ApiTable>
 
@@ -136,21 +148,66 @@ title: 数据表格 (Data Table)
 <script setup lang="ts">
 import { ref } from 'vue'
 
-const columns = ref<any[]>([
-  { key: 'name', label: '姓名' },
-  { key: 'age', label: '年龄' },
-  { key: 'address', label: '地址' }
+const columns = ref([
+  { key: 'title', label: '标题' },
+  { key: 'author', label: '作者' },
+  { key: 'description', label: '描述' },
+  { key: 'category', label: '分类' },
+  { key: 'date', label: '发布日期' }
+])
+
+const sortColumns = ref([
+  { key: 'title', label: '标题' },
+  { key: 'author', label: '作者', sortable: true },
+  { key: 'description', label: '描述' },
+  { key: 'category', label: '分类', sortable: true },
+  { key: 'date', label: '发布日期', sortable: true }
 ])
 
-const sortColumns = ref<any[]>([
-  { key: 'name', label: '姓名' },
-  { key: 'age', label: '年龄', sortable: true },
-  { key: 'address', label: '地址' }
+const ellipsisColumns = ref([
+  { key: 'title', label: '标题' },
+  { key: 'author', label: '作者' },
+  { key: 'description', label: '描述', ellipsis: false },
+  { key: 'category', label: '分类' },
+  { key: 'date', label: '发布日期' }
 ])
 
 const data = ref([
-  { name: '张三', age: 18, address: '北京' },
-  { name: '李四', age: 20, address: '上海' }
+  {
+    title: '深入理解 Vue.js 响应式系统的原理与实现',
+    author: '张文豪',
+    description: 'Vue.js 的响应式系统是其最核心的特性之一，本文将深入探讨其实现原理。从最基本的 Object.defineProperty 到 Proxy 的使用，从依赖收集到派发更新，从计算属性到监听器，我们会逐步分析响应式系统的每个环节。同时也会讨论 Vue 3 中新的响应式系统的改进和优化，以及如何在实际开发中更好地利用响应式特性。',
+    category: '前端开发',
+    date: '2024-01-15'
+  },
+  {
+    title: 'TypeScript 高级特性与实践指南',
+    author: '李明',
+    description: 'TypeScript 作为 JavaScript 的超集，为我们提供了强大的类型系统和面向对象编程的能力。本文将详细介绍 TypeScript 中的高级类型、泛型、装饰器等特性，并结合实际项目经验，探讨如何在大型项目中更好地应用这些特性。我们还会分享一些在实际开发中遇到的类型设计难题及其解决方案，帮助开发者更好地理解和使用 TypeScript。',
+    category: '编程语言',
+    date: '2024-01-20'
+  },
+  {
+    title: '现代前端工程化实践：从搭建到部署',
+    author: '王建国',
+    description: '随着前端项目的复杂度不断提升，工程化已经成为必不可少的环节。本文将从项目初始化开始，详细讲解现代前端工程化的各个方面，包括构建工具的选择与配置、代码规范的制定与执行、测试框架的搭建、CI/CD 流程的设计等。通过实际案例，展示如何搭建一个完整的前端工程化体系，提高开发效率和代码质量。',
+    category: '工程化',
+    date: '2024-01-25'
+  },
+  {
+    title: '微前端架构实践与性能优化',
+    author: '赵云',
+    description: '微前端作为一种新兴的架构模式，能够帮助我们更好地管理大型前端应用。本文将分享微前端的实践经验，包括框架选型、应用拆分策略、路由管理、通信机制等关键问题的解决方案。同时，我们还会深入讨论微前端架构下的性能优化策略，包括资源加载优化、预加载策略、缓存管理等，帮助开发者构建高性能的微前端应用。',
+    category: '架构设计',
+    date: '2024-01-30'
+  },
+  {
+    title: 'React 性能优化最佳实践',
+    author: '陈思',
+    description: '在 React 应用开发中，性能优化是一个永恒的主题。本文将深入探讨 React 应用的性能优化技巧，从组件渲染优化到状态管理，从代码分割到懒加载，从服务端渲染到缓存策略，我们会通过具体的案例来展示各种优化手段的效果和实现方法。同时也会介绍一些性能检测和分析工具，帮助开发者更好地发现和解决性能问题。',
+    category: '性能优化',
+    date: '2024-02-01'
+  }
 ])
 
 const handleChange = () => {
diff --git a/src/App.vue b/src/App.vue
index cb281caf..651396cd 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,8 +2,7 @@
   <div class="p-32 space-y-4">
     <ShadcnDataTable :columns="columns"
                      :data="data"
-                     size="small"
-                     @on-sort="handleSort">
+                     size="small">
     </ShadcnDataTable>
   </div>
 </template>
@@ -11,48 +10,49 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 
-const columns = ref<any[]>([
-  { key: 'name', label: '姓名' },
-  { key: 'age', label: '年龄', sortable: true },
-  { key: 'address', label: '地址', sortable: true }
+const columns = ref([
+  { key: 'title', label: '标题' },
+  { key: 'author', label: '作者', sortable: true },
+  { key: 'description', label: '描述', ellipsis: false },
+  { key: 'category', label: '分类', sortable: true },
+  { key: 'date', label: '发布日期', sortable: true }
 ])
 
 const data = ref([
-  { name: '张三', age: 18, address: '北京' },
-  { name: '李四', age: 20, address: '上海' }
+  {
+    title: '深入理解 Vue.js 响应式系统的原理与实现',
+    author: '张文豪',
+    description: 'Vue.js 的响应式系统是其最核心的特性之一，本文将深入探讨其实现原理。从最基本的 Object.defineProperty 到 Proxy 的使用，从依赖收集到派发更新，从计算属性到监听器，我们会逐步分析响应式系统的每个环节。同时也会讨论 Vue 3 中新的响应式系统的改进和优化，以及如何在实际开发中更好地利用响应式特性。',
+    category: '前端开发',
+    date: '2024-01-15'
+  },
+  {
+    title: 'TypeScript 高级特性与实践指南',
+    author: '李明',
+    description: 'TypeScript 作为 JavaScript 的超集，为我们提供了强大的类型系统和面向对象编程的能力。本文将详细介绍 TypeScript 中的高级类型、泛型、装饰器等特性，并结合实际项目经验，探讨如何在大型项目中更好地应用这些特性。我们还会分享一些在实际开发中遇到的类型设计难题及其解决方案，帮助开发者更好地理解和使用 TypeScript。',
+    category: '编程语言',
+    date: '2024-01-20'
+  },
+  {
+    title: '现代前端工程化实践：从搭建到部署',
+    author: '王建国',
+    description: '随着前端项目的复杂度不断提升，工程化已经成为必不可少的环节。本文将从项目初始化开始，详细讲解现代前端工程化的各个方面，包括构建工具的选择与配置、代码规范的制定与执行、测试框架的搭建、CI/CD 流程的设计等。通过实际案例，展示如何搭建一个完整的前端工程化体系，提高开发效率和代码质量。',
+    category: '工程化',
+    date: '2024-01-25'
+  },
+  {
+    title: '微前端架构实践与性能优化',
+    author: '赵云',
+    description: '微前端作为一种新兴的架构模式，能够帮助我们更好地管理大型前端应用。本文将分享微前端的实践经验，包括框架选型、应用拆分策略、路由管理、通信机制等关键问题的解决方案。同时，我们还会深入讨论微前端架构下的性能优化策略，包括资源加载优化、预加载策略、缓存管理等，帮助开发者构建高性能的微前端应用。',
+    category: '架构设计',
+    date: '2024-01-30'
+  },
+  {
+    title: 'React 性能优化最佳实践',
+    author: '陈思',
+    description: '在 React 应用开发中，性能优化是一个永恒的主题。本文将深入探讨 React 应用的性能优化技巧，从组件渲染优化到状态管理，从代码分割到懒加载，从服务端渲染到缓存策略，我们会通过具体的案例来展示各种优化手段的效果和实现方法。同时也会介绍一些性能检测和分析工具，帮助开发者更好地发现和解决性能问题。',
+    category: '性能优化',
+    date: '2024-02-01'
+  }
 ])
-
-// 模拟服务器排序数据
-const mockData = [
-  { name: '张三', age: 18, address: '北京' },
-  { name: '李四', age: 20, address: '上海' },
-  { name: '王五', age: 25, address: '广州' },
-  { name: '赵六', age: 22, address: '深圳' }
-]
-
-const handleSort = async (sortColumns: any[]) => {
-  // 模拟服务器排序
-  setTimeout(() => {
-    const sortedData = [...mockData].sort((a, b) => {
-      for (const column of sortColumns) {
-        const aValue = a[column.key]
-        const bValue = b[column.key]
-        const order = column.sort === 'asc' ? 1 : -1
-
-        if (aValue === bValue) {
-          continue
-        }
-
-        if (typeof aValue === 'string') {
-          return aValue.localeCompare(bValue) * order
-        }
-        return (aValue - bValue) * order
-      }
-      return 0
-    })
-
-    // 更新表格数据
-    data.value = sortedData
-  }, 2000)
-}
 </script>
\ No newline at end of file
diff --git a/src/ui/data-table/components/TableBody.vue b/src/ui/data-table/components/TableBody.vue
index 021671a8..ee2b4a5f 100644
--- a/src/ui/data-table/components/TableBody.vue
+++ b/src/ui/data-table/components/TableBody.vue
@@ -7,7 +7,10 @@
       ]">
     <td v-for="col in columns"
         :key="col.key"
-        :class="[TablePaddingSize[size]]">
+        :class="[ TablePaddingSize[size],
+          'min-w-[100px]',
+          col.ellipsis !== false ? [ 'max-w-lg truncate whitespace-nowrap overflow-hidden' ] : [ 'break-words whitespace-normal' ]
+        ]">
       {{ row[col.key] }}
     </td>
   </tr>
diff --git a/src/ui/data-table/types.ts b/src/ui/data-table/types.ts
index 9cfc07fe..e76e4c7d 100644
--- a/src/ui/data-table/types.ts
+++ b/src/ui/data-table/types.ts
@@ -8,6 +8,7 @@ export interface ColumnProps
     label: string
     sortable?: boolean
     sort?: SortOrder
+    ellipsis?: boolean // 是否省略
 }
 
 export interface DataTableProps

From 33f4f76c4c09148dc10dc1afc812463d33bc9803 Mon Sep 17 00:00:00 2001
From: qianmoQ <shicheng@devlive.org>
Date: Sun, 12 Jan 2025 22:38:18 +0800
Subject: [PATCH 05/27] =?UTF-8?q?=E7=BB=84=E4=BB=B6(=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E8=A1=A8=E6=A0=BC):=20=E6=94=AF=E6=8C=81=E8=AE=BE=E7=BD=AE?=
 =?UTF-8?q?=E5=88=97=E5=AE=BD=E5=BA=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/components/data/data-table.md           | 20 +++++++
 src/App.vue                                  |  2 +-
 src/ui/data-table/ShadcnDataTable.vue        | 63 ++++++++++++++++----
 src/ui/data-table/components/TableBody.vue   |  3 +-
 src/ui/data-table/components/TableHeader.vue |  2 +
 src/ui/data-table/types.ts                   |  1 +
 6 files changed, 79 insertions(+), 12 deletions(-)

diff --git a/docs/components/data/data-table.md b/docs/components/data/data-table.md
index c2bca821..7ca8758e 100644
--- a/docs/components/data/data-table.md
+++ b/docs/components/data/data-table.md
@@ -112,6 +112,17 @@ title: 数据表格 (Data Table)
 
 :::
 
+## 列宽度 (width)
+
+::: raw
+
+<CodeRunner title="列宽度 (width)" codeKey="width">
+    <ShadcnDataTable :columns="widthColumns" :data="data">
+    </ShadcnDataTable>
+</CodeRunner>
+
+:::
+
 ## 数据表格 (Data Table) 属性
 
 <ApiTable title="数据表格 (Data Table) 属性"
@@ -133,6 +144,7 @@ title: 数据表格 (Data Table)
         ['sort', '列的排序状态', 'enum', '-', 'asc | desc'],
         ['sortable', '列是否可排序', 'boolean', 'false', '-'],
         ['ellipsis', '列内容是否省略，超出时显示省略号', 'boolean', 'true', '-'],
+        ['width', '宽度，支持输入数字和字符串会自动计算，如果是数字的情况时，单位为 px', 'string', 'auto', '-'],
     ]">
 </ApiTable>
 
@@ -172,6 +184,14 @@ const ellipsisColumns = ref([
   { key: 'date', label: '发布日期' }
 ])
 
+const widthColumns = ref([
+  { key: 'title', label: '标题', width: 100 },
+  { key: 'author', label: '作者' },
+  { key: 'description', label: '描述', width: 500 },
+  { key: 'category', label: '分类' },
+  { key: 'date', label: '发布日期' }
+])
+
 const data = ref([
   {
     title: '深入理解 Vue.js 响应式系统的原理与实现',
diff --git a/src/App.vue b/src/App.vue
index 651396cd..5fbc811a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -13,7 +13,7 @@ import { ref } from 'vue'
 const columns = ref([
   { key: 'title', label: '标题' },
   { key: 'author', label: '作者', sortable: true },
-  { key: 'description', label: '描述', ellipsis: false },
+  { key: 'description', label: '描述', width: 500 },
   { key: 'category', label: '分类', sortable: true },
   { key: 'date', label: '发布日期', sortable: true }
 ])
diff --git a/src/ui/data-table/ShadcnDataTable.vue b/src/ui/data-table/ShadcnDataTable.vue
index 07736222..9885a0bd 100644
--- a/src/ui/data-table/ShadcnDataTable.vue
+++ b/src/ui/data-table/ShadcnDataTable.vue
@@ -1,13 +1,15 @@
 <template>
-  <div class="w-full">
-    <table class="w-full border-collapse">
-      <TableHeader :columns="columns"
-                   :size="size"
-                   @on-sort-change="handleSortChange"/>
-      <TableBody :columns="columns"
-                 :data="sortedData"
-                 :size="size"/>
-    </table>
+  <div class="overflow-auto custom-scrollbar">
+    <div :style="{minWidth: 'calc(100vh)'}">
+      <table class="w-full border-collapse table-fixed">
+        <TableHeader :columns="columns"
+                     :size="size"
+                     @on-sort-change="handleSortChange"/>
+        <TableBody :columns="columns"
+                   :data="sortedData"
+                   :size="size"/>
+      </table>
+    </div>
   </div>
 </template>
 
@@ -55,4 +57,45 @@ const sortedData = computed(() => {
     return 0
   })
 })
-</script>
\ No newline at end of file
+</script>
+
+<style scoped>
+.custom-scrollbar {
+  @apply overflow-auto;
+
+  /* 禁用滚动条悬停时的高度变化 */
+
+  &::-webkit-scrollbar {
+    @apply h-2 w-2;
+
+    &:hover {
+      @apply h-2 w-2;
+      /* 确保悬停时保持相同高度 */
+    }
+  }
+
+  &::-webkit-scrollbar-track {
+    @apply bg-gray-100 rounded-full;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    @apply bg-gray-300 rounded-full;
+
+    &:hover {
+      @apply bg-gray-400;
+      /* 只改变颜色，不改变大小 */
+    }
+  }
+
+  /* Firefox */
+  scrollbar-width: thin !important; /* 使用 !important 确保大小不变 */
+  scrollbar-color: #d1d5db #f3f4f6;
+}
+
+/* 禁用所有可能的状态下的大小变化 */
+.custom-scrollbar:hover::-webkit-scrollbar,
+.custom-scrollbar:active::-webkit-scrollbar,
+.custom-scrollbar:focus::-webkit-scrollbar {
+  @apply h-2 w-2;
+}
+</style>
\ No newline at end of file
diff --git a/src/ui/data-table/components/TableBody.vue b/src/ui/data-table/components/TableBody.vue
index ee2b4a5f..53be972a 100644
--- a/src/ui/data-table/components/TableBody.vue
+++ b/src/ui/data-table/components/TableBody.vue
@@ -7,8 +7,8 @@
       ]">
     <td v-for="col in columns"
         :key="col.key"
+        :style="col.width ? { width: calcSize(col.width) } : {}"
         :class="[ TablePaddingSize[size],
-          'min-w-[100px]',
           col.ellipsis !== false ? [ 'max-w-lg truncate whitespace-nowrap overflow-hidden' ] : [ 'break-words whitespace-normal' ]
         ]">
       {{ row[col.key] }}
@@ -21,6 +21,7 @@
 import { DataTableProps } from '../types'
 import { BaseSize } from '@/ui/common/size.ts'
 import { TablePaddingSize } from '@/ui/data-table/size.ts'
+import { calcSize } from '@/utils/common.ts'
 
 withDefaults(defineProps<DataTableProps>(), {
   size: 'default'
diff --git a/src/ui/data-table/components/TableHeader.vue b/src/ui/data-table/components/TableHeader.vue
index 6db7523e..0c27d4a4 100644
--- a/src/ui/data-table/components/TableHeader.vue
+++ b/src/ui/data-table/components/TableHeader.vue
@@ -3,6 +3,7 @@
   <tr class="border-b bg-gray-100">
     <th v-for="col in columns"
         :key="col.key"
+        :style="col.width ? { width: calcSize(col.width) } : {}"
         :class="[ 'text-left font-medium',
             TablePaddingSize[size],
             col.sortable && 'cursor-pointer select-none'
@@ -31,6 +32,7 @@
 import type { ColumnProps } from '../types'
 import { Size, TablePaddingSize } from '@/ui/data-table/size.ts'
 import ShadcnIcon from '@/ui/icon'
+import { calcSize } from '@/utils/common.ts'
 
 withDefaults(defineProps<{
   columns: ColumnProps[],
diff --git a/src/ui/data-table/types.ts b/src/ui/data-table/types.ts
index e76e4c7d..f098a4a5 100644
--- a/src/ui/data-table/types.ts
+++ b/src/ui/data-table/types.ts
@@ -9,6 +9,7 @@ export interface ColumnProps
     sortable?: boolean
     sort?: SortOrder
     ellipsis?: boolean // 是否省略
+    width?: string // 宽度，支持输入数字和字符串会自动计算，如果是数字的情况时，单位为 px
 }
 
 export interface DataTableProps

From c91d718cfcbd81dfe938bc226ebac224f0cf62f4 Mon Sep 17 00:00:00 2001
From: qianmoQ <shicheng@devlive.org>
Date: Sun, 12 Jan 2025 23:46:35 +0800
Subject: [PATCH 06/27] =?UTF-8?q?=E7=BB=84=E4=BB=B6(=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E8=A1=A8=E6=A0=BC):=20=E6=94=AF=E6=8C=81=E8=AE=BE=E7=BD=AE?=
 =?UTF-8?q?=E6=8F=90=E7=A4=BA=E5=AE=8C=E6=95=B4=E5=86=85=E5=AE=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/components/data/data-table.md           | 42 ++++++++++++-
 src/App.vue                                  |  4 +-
 src/ui/data-table/components/TableBody.vue   | 62 +++++++++++++++++++-
 src/ui/data-table/components/TableHeader.vue |  2 +-
 src/ui/data-table/types.ts                   |  2 +
 5 files changed, 106 insertions(+), 6 deletions(-)

diff --git a/docs/components/data/data-table.md b/docs/components/data/data-table.md
index 7ca8758e..88992e87 100644
--- a/docs/components/data/data-table.md
+++ b/docs/components/data/data-table.md
@@ -116,13 +116,35 @@ title: 数据表格 (Data Table)
 
 ::: raw
 
-<CodeRunner title="列宽度 (width)" codeKey="width">
+<CodeRunner title="列宽度 (width)" codeKey="width" warning="只需要在列上添加 width 属性即可">
     <ShadcnDataTable :columns="widthColumns" :data="data">
     </ShadcnDataTable>
 </CodeRunner>
 
 :::
 
+## 显示提示 (tooltip)
+
+::: raw
+
+<CodeRunner title="显示提示 (tooltip)" codeKey="tooltip" warning="只需要在列上添加 tooltip 属性即可">
+    <ShadcnDataTable :columns="tooltipColumns" :data="data">
+    </ShadcnDataTable>
+</CodeRunner>
+
+:::
+
+## 对齐方式 (align)
+
+::: raw
+
+<CodeRunner title="对齐方式 (align)" codeKey="align" warning="只需要在列上添加 align 属性即可">
+    <ShadcnDataTable :columns="alignColumns" :data="data">
+    </ShadcnDataTable>
+</CodeRunner>
+
+:::
+
 ## 数据表格 (Data Table) 属性
 
 <ApiTable title="数据表格 (Data Table) 属性"
@@ -145,6 +167,8 @@ title: 数据表格 (Data Table)
         ['sortable', '列是否可排序', 'boolean', 'false', '-'],
         ['ellipsis', '列内容是否省略，超出时显示省略号', 'boolean', 'true', '-'],
         ['width', '宽度，支持输入数字和字符串会自动计算，如果是数字的情况时，单位为 px', 'string', 'auto', '-'],
+        ['tooltip', '列内容是否显示提示', 'boolean', 'false', '-'],
+        ['align', '对齐方式，可选值为', 'enum', 'left', 'left | right | center'],
     ]">
 </ApiTable>
 
@@ -192,6 +216,22 @@ const widthColumns = ref([
   { key: 'date', label: '发布日期' }
 ])
 
+const tooltipColumns = ref([
+  { key: 'title', label: '标题' },
+  { key: 'author', label: '作者' },
+  { key: 'description', label: '描述', tooltip: true },
+  { key: 'category', label: '分类' },
+  { key: 'date', label: '发布日期' }
+])
+
+const alignColumns = ref([
+  { key: 'title', label: '标题' },
+  { key: 'author', label: '作者' },
+  { key: 'description', label: '描述' },
+  { key: 'category', label: '分类' },
+  { key: 'date', label: '发布日期', align: 'center' }
+])
+
 const data = ref([
   {
     title: '深入理解 Vue.js 响应式系统的原理与实现',
diff --git a/src/App.vue b/src/App.vue
index 5fbc811a..2edd36de 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -13,8 +13,8 @@ import { ref } from 'vue'
 const columns = ref([
   { key: 'title', label: '标题' },
   { key: 'author', label: '作者', sortable: true },
-  { key: 'description', label: '描述', width: 500 },
-  { key: 'category', label: '分类', sortable: true },
+  { key: 'description', label: '描述', width: 500, tooltip: true },
+  { key: 'category', label: '分类', sortable: true, align: 'center' },
   { key: 'date', label: '发布日期', sortable: true }
 ])
 
diff --git a/src/ui/data-table/components/TableBody.vue b/src/ui/data-table/components/TableBody.vue
index 53be972a..38376cc6 100644
--- a/src/ui/data-table/components/TableBody.vue
+++ b/src/ui/data-table/components/TableBody.vue
@@ -9,8 +9,11 @@
         :key="col.key"
         :style="col.width ? { width: calcSize(col.width) } : {}"
         :class="[ TablePaddingSize[size],
-          col.ellipsis !== false ? [ 'max-w-lg truncate whitespace-nowrap overflow-hidden' ] : [ 'break-words whitespace-normal' ]
-        ]">
+          `text-${col.align || 'left'}`,
+          col.ellipsis !== false ? 'relative max-w-lg truncate whitespace-nowrap overflow-hidden' : 'break-words whitespace-normal'
+        ]"
+        @mousemove.stop.prevent="(col.ellipsis !== false && col.tooltip) && showTooltip($event, row[col.key])"
+        @mouseleave.stop.prevent="hideTooltip">
       {{ row[col.key] }}
     </td>
   </tr>
@@ -22,8 +25,63 @@ import { DataTableProps } from '../types'
 import { BaseSize } from '@/ui/common/size.ts'
 import { TablePaddingSize } from '@/ui/data-table/size.ts'
 import { calcSize } from '@/utils/common.ts'
+import { onBeforeUnmount, onMounted } from 'vue'
 
 withDefaults(defineProps<DataTableProps>(), {
   size: 'default'
 })
+
+let tooltipEl: HTMLElement | null = null
+
+// 创建 tooltip 元素
+onMounted(() => {
+  tooltipEl = document.createElement('div')
+  tooltipEl.className = 'hidden fixed z-50 bg-gray-800 text-white text-sm rounded-lg py-2 px-3 max-w-xs whitespace-normal'
+  document.body.appendChild(tooltipEl)
+})
+
+// 清理 tooltip 元素
+onBeforeUnmount(() => {
+  tooltipEl?.remove()
+})
+
+// 显示 tooltip
+const showTooltip = (event: MouseEvent, content: string) => {
+  if (!tooltipEl) {
+    return
+  }
+
+  tooltipEl.textContent = content
+  tooltipEl.className = 'fixed z-50 bg-gray-800 text-white text-sm rounded-lg py-2 px-3 max-w-xs whitespace-normal'
+
+  const tooltipRect = tooltipEl.getBoundingClientRect()
+
+  // 计算位置，使 tooltip 在鼠标位置居中并默认显示在上方
+  let left = event.clientX - (tooltipRect.width / 2)
+  let top = event.clientY - tooltipRect.height - 12 // 默认在鼠标上方，留出 12px 间距
+
+  // 检查右边界
+  if (left + tooltipRect.width > window.innerWidth) {
+    left = window.innerWidth - tooltipRect.width - 8
+  }
+  // 检查左边界
+  if (left < 8) {
+    left = 8
+  }
+
+  // 如果上方空间不足，则显示在下方
+  if (top < 8) {
+    top = event.clientY + 12 // 显示在鼠标下方
+  }
+
+  tooltipEl!.style.left = `${ left }px`
+  tooltipEl!.style.top = `${ top }px`
+}
+
+// 隐藏 tooltip
+const hideTooltip = () => {
+  if (tooltipEl) {
+    tooltipEl.className = 'hidden fixed z-50 bg-gray-800 text-white text-sm rounded-lg py-2 px-3 max-w-xs whitespace-normal'
+  }
+}
 </script>
\ No newline at end of file
diff --git a/src/ui/data-table/components/TableHeader.vue b/src/ui/data-table/components/TableHeader.vue
index 0c27d4a4..f60f2c86 100644
--- a/src/ui/data-table/components/TableHeader.vue
+++ b/src/ui/data-table/components/TableHeader.vue
@@ -4,7 +4,7 @@
     <th v-for="col in columns"
         :key="col.key"
         :style="col.width ? { width: calcSize(col.width) } : {}"
-        :class="[ 'text-left font-medium',
+        :class="[ `text-${col.align || 'left'} font-medium`,
             TablePaddingSize[size],
             col.sortable && 'cursor-pointer select-none'
           ]"
diff --git a/src/ui/data-table/types.ts b/src/ui/data-table/types.ts
index f098a4a5..90c9c043 100644
--- a/src/ui/data-table/types.ts
+++ b/src/ui/data-table/types.ts
@@ -10,6 +10,8 @@ export interface ColumnProps
     sort?: SortOrder
     ellipsis?: boolean // 是否省略
     width?: string // 宽度，支持输入数字和字符串会自动计算，如果是数字的情况时，单位为 px
+    tooltip?: string
+    align?: 'left' | 'center' | 'right'
 }
 
 export interface DataTableProps

From abd2dbe07c406a410a4280c075dd9bcf7dfba4b2 Mon Sep 17 00:00:00 2001
From: qianmoQ <shicheng@devlive.org>
Date: Mon, 13 Jan 2025 00:48:06 +0800
Subject: [PATCH 07/27] =?UTF-8?q?=E7=BB=84=E4=BB=B6(=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E8=A1=A8=E6=A0=BC):=20=E6=B7=BB=E5=8A=A0=E5=8D=95=E5=85=83?=
 =?UTF-8?q?=E6=A0=BC=E7=82=B9=E5=87=BB=E4=BA=8B=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .gitignore                                    |  1 +
 .../publish/publish-deploy-playground.sh      |  1 +
 docs/components/data/data-table.md            | 15 +++++-----
 docs/public/components/data/data-table.svg    | 24 +++++++++++++++
 playground/package.json                       |  2 +-
 playground/pnpm-lock.yaml                     | 21 ++++----------
 src/App.vue                                   |  7 ++++-
 src/ui/data-table/ShadcnDataTable.vue         |  8 +++--
 src/ui/data-table/components/TableBody.vue    | 29 +++++++++++++++----
 src/ui/data-table/types.ts                    |  5 ++++
 10 files changed, 80 insertions(+), 33 deletions(-)
 create mode 100644 docs/public/components/data/data-table.svg

diff --git a/.gitignore b/.gitignore
index ca4f0072..32a53bf3 100644
--- a/.gitignore
+++ b/.gitignore
@@ -28,3 +28,4 @@ docs/.vitepress/cache
 src/views/pages/components/ExampleHome.vue
 depcheck-output.json
 .npm
+Library
\ No newline at end of file
diff --git a/configure/publish/publish-deploy-playground.sh b/configure/publish/publish-deploy-playground.sh
index 62af9804..6a6dd099 100644
--- a/configure/publish/publish-deploy-playground.sh
+++ b/configure/publish/publish-deploy-playground.sh
@@ -2,6 +2,7 @@
 HOME=$(pwd)
 
 cd $HOME/playground
+pnpm upgrade view-shadcn-ui@latest
 pnpm run build
 
 rm -rf /tmp/playground-dist
diff --git a/docs/components/data/data-table.md b/docs/components/data/data-table.md
index 88992e87..88b4ac1b 100644
--- a/docs/components/data/data-table.md
+++ b/docs/components/data/data-table.md
@@ -12,7 +12,7 @@ title: 数据表格 (Data Table)
 
 ::: raw
 
-<CodeRunner title="用法" codeKey="usage">
+<CodeRunner title="用法" codeKey="data-table-usage">
     <ShadcnDataTable :columns="columns" :data="data">
     </ShadcnDataTable>
 </CodeRunner>
@@ -34,7 +34,7 @@ title: 数据表格 (Data Table)
 
 ::: raw
 
-<CodeRunner title="尺寸 (size)" codeKey="size">
+<CodeRunner title="尺寸 (size)" codeKey="data-table-size">
   <div class="space-y-4">
     <div>
       <ShadcnDivider orientation="left">小尺寸</ShadcnDivider>
@@ -94,7 +94,7 @@ title: 数据表格 (Data Table)
 
 ::: raw
 
-<CodeRunner title="排序 (sort)" codeKey="sort" warning="只需要在列上添加 sortable 属性即可，多列排序需要按住 Shift 键">
+<CodeRunner title="排序 (sort)" codeKey="data-table-sort" warning="只需要在列上添加 sortable 属性即可，多列排序需要按住 Shift 键">
     <ShadcnDataTable :columns="sortColumns" :data="data">
     </ShadcnDataTable>
 </CodeRunner>
@@ -105,7 +105,7 @@ title: 数据表格 (Data Table)
 
 ::: raw
 
-<CodeRunner title="列省略 (ellipsis)" codeKey="ellipsis" warning="只需要在列上添加 ellipsis 属性即可，默认会显示省略号">
+<CodeRunner title="列省略 (ellipsis)" codeKey="data-table-ellipsis" warning="只需要在列上添加 ellipsis 属性即可，默认会显示省略号">
     <ShadcnDataTable :columns="ellipsisColumns" :data="data">
     </ShadcnDataTable>
 </CodeRunner>
@@ -116,7 +116,7 @@ title: 数据表格 (Data Table)
 
 ::: raw
 
-<CodeRunner title="列宽度 (width)" codeKey="width" warning="只需要在列上添加 width 属性即可">
+<CodeRunner title="列宽度 (width)" codeKey="data-table-width" warning="只需要在列上添加 width 属性即可">
     <ShadcnDataTable :columns="widthColumns" :data="data">
     </ShadcnDataTable>
 </CodeRunner>
@@ -127,7 +127,7 @@ title: 数据表格 (Data Table)
 
 ::: raw
 
-<CodeRunner title="显示提示 (tooltip)" codeKey="tooltip" warning="只需要在列上添加 tooltip 属性即可">
+<CodeRunner title="显示提示 (tooltip)" codeKey="data-table-tooltip" warning="只需要在列上添加 tooltip 属性即可">
     <ShadcnDataTable :columns="tooltipColumns" :data="data">
     </ShadcnDataTable>
 </CodeRunner>
@@ -138,7 +138,7 @@ title: 数据表格 (Data Table)
 
 ::: raw
 
-<CodeRunner title="对齐方式 (align)" codeKey="align" warning="只需要在列上添加 align 属性即可">
+<CodeRunner title="对齐方式 (align)" codeKey="data-table-align" warning="只需要在列上添加 align 属性即可">
     <ShadcnDataTable :columns="alignColumns" :data="data">
     </ShadcnDataTable>
 </CodeRunner>
@@ -178,6 +178,7 @@ title: 数据表格 (Data Table)
     :headers="['事件', '描述', '回调参数']"
     :columns="[
         ['on-sort', '当表格排序发生变化时触发', '排序列的列表'],
+        ['on-cell-click', '当单元格被点击时触发', '行索引，列的 key 值，行数据'],
     ]">
 </ApiTable>
 
diff --git a/docs/public/components/data/data-table.svg b/docs/public/components/data/data-table.svg
new file mode 100644
index 00000000..a56f804b
--- /dev/null
+++ b/docs/public/components/data/data-table.svg
@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
+    <!-- Define Gradient -->
+    <defs>
+        <linearGradient id="dataTableGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+            <stop offset="0%" style="stop-color:#93c5fd;stop-opacity:1" />
+            <stop offset="100%" style="stop-color:#a5b4fc;stop-opacity:1" />
+        </linearGradient>
+    </defs>
+
+    <!-- Background Circle -->
+    <circle cx="100" cy="100" r="100" fill="url(#dataTableGradient)" />
+
+    <!-- Table Header -->
+    <rect x="55" y="60" width="90" height="20" fill="white" rx="4" />
+    <rect x="60" y="65" width="80" height="10" fill="#60a5fa" rx="3" />
+
+    <!-- Table Rows -->
+    <rect x="55" y="85" width="90" height="15" fill="white" rx="4" />
+    <rect x="60" y="88" width="70" height="8" fill="#93c5fd" rx="3" />
+    <rect x="55" y="105" width="90" height="15" fill="white" rx="4" />
+    <rect x="60" y="108" width="50" height="8" fill="#a5b4fc" rx="3" />
+    <rect x="55" y="125" width="90" height="15" fill="white" rx="4" />
+    <rect x="60" y="128" width="65" height="8" fill="#93c5fd" rx="3" />
+</svg>
\ No newline at end of file
diff --git a/playground/package.json b/playground/package.json
index 8fd748ba..dd8570c1 100644
--- a/playground/package.json
+++ b/playground/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "view-shadcn-ui": "^2024.5.4",
+    "view-shadcn-ui": "^2025.1.0",
     "vue": "^3.3.4"
   },
   "devDependencies": {
diff --git a/playground/pnpm-lock.yaml b/playground/pnpm-lock.yaml
index 503d1d1f..32a48802 100644
--- a/playground/pnpm-lock.yaml
+++ b/playground/pnpm-lock.yaml
@@ -9,8 +9,8 @@ importers:
   .:
     dependencies:
       view-shadcn-ui:
-        specifier: 2024.5.4-alpha.1735315465
-        version: 2024.5.4-alpha.1735315465(tailwindcss@3.4.17)
+        specifier: ^2025.1.0
+        version: 2025.1.0
       vue:
         specifier: ^3.3.4
         version: 3.5.13
@@ -735,11 +735,6 @@ packages:
   tailwind-merge@2.6.0:
     resolution: {integrity: sha512-P+Vu1qXfzediirmHOC3xKGAYeZtPcV9g76X+xg2FD4tYgR71ewMA35Y3sCz3zhiN/dwefRpJX0yBcgwi1fXNQA==}
 
-  tailwindcss-animate@1.0.7:
-    resolution: {integrity: sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==}
-    peerDependencies:
-      tailwindcss: '>=3.0.0 || insiders'
-
   tailwindcss@3.4.17:
     resolution: {integrity: sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og==}
     engines: {node: '>=14.0.0'}
@@ -768,8 +763,8 @@ packages:
   util-deprecate@1.0.2:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
 
-  view-shadcn-ui@2024.5.4-alpha.1735315465:
-    resolution: {integrity: sha512-DyyXne5u5+rwjocNXbyT8zDZxAJtjO6FRG7ND6ltboY93qQjlw1VoNXfrsN7ArpldqiLjnnusXAe0qtO+gaejw==}
+  view-shadcn-ui@2025.1.0:
+    resolution: {integrity: sha512-ogQMc2oNxI42EwU9bA85gYnUq7XY1x1eUZnZkdH898zTUFjEEXh3L4CZpmk0JjXSqM0kmpSLRMkChVW1MJvuTA==}
 
   vite-plugin-monaco-editor@1.1.0:
     resolution: {integrity: sha512-IvtUqZotrRoVqwT0PBBDIZPNraya3BxN/bfcNfnxZ5rkJiGcNtO5eAOWWSgT7zullIAEqQwxMU83yL9J5k7gww==}
@@ -1459,10 +1454,6 @@ snapshots:
 
   tailwind-merge@2.6.0: {}
 
-  tailwindcss-animate@1.0.7(tailwindcss@3.4.17):
-    dependencies:
-      tailwindcss: 3.4.17
-
   tailwindcss@3.4.17:
     dependencies:
       '@alloc/quick-lru': 5.2.0
@@ -1512,7 +1503,7 @@ snapshots:
 
   util-deprecate@1.0.2: {}
 
-  view-shadcn-ui@2024.5.4-alpha.1735315465(tailwindcss@3.4.17):
+  view-shadcn-ui@2025.1.0:
     dependencies:
       clsx: 2.1.1
       lodash: 4.17.21
@@ -1520,10 +1511,8 @@ snapshots:
       monaco-editor: 0.52.2
       qrcode: 1.5.4
       tailwind-merge: 2.6.0
-      tailwindcss-animate: 1.0.7(tailwindcss@3.4.17)
       vue: 3.5.13
     transitivePeerDependencies:
-      - tailwindcss
       - typescript
 
   vite-plugin-monaco-editor@1.1.0(monaco-editor@0.52.2):
diff --git a/src/App.vue b/src/App.vue
index 2edd36de..2e6fa72b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,7 +2,8 @@
   <div class="p-32 space-y-4">
     <ShadcnDataTable :columns="columns"
                      :data="data"
-                     size="small">
+                     size="small"
+                     @on-cell-click="handleCellClick">
     </ShadcnDataTable>
   </div>
 </template>
@@ -55,4 +56,8 @@ const data = ref([
     date: '2024-02-01'
   }
 ])
+
+const handleCellClick = (playload: { rowIndex: number; col: string; row: any }) => {
+  console.log(`点击了第 ${ playload.rowIndex + 1 } 行，${ playload.col } 列`)
+}
 </script>
\ No newline at end of file
diff --git a/src/ui/data-table/ShadcnDataTable.vue b/src/ui/data-table/ShadcnDataTable.vue
index 9885a0bd..2b05baaa 100644
--- a/src/ui/data-table/ShadcnDataTable.vue
+++ b/src/ui/data-table/ShadcnDataTable.vue
@@ -4,10 +4,14 @@
       <table class="w-full border-collapse table-fixed">
         <TableHeader :columns="columns"
                      :size="size"
-                     @on-sort-change="handleSortChange"/>
+                     @on-sort-change="handleSortChange">
+        </TableHeader>
+
         <TableBody :columns="columns"
                    :data="sortedData"
-                   :size="size"/>
+                   :size="size"
+                   @on-cell-click="emits('on-cell-click', $event)">
+        </TableBody>
       </table>
     </div>
   </div>
diff --git a/src/ui/data-table/components/TableBody.vue b/src/ui/data-table/components/TableBody.vue
index 38376cc6..d93f498b 100644
--- a/src/ui/data-table/components/TableBody.vue
+++ b/src/ui/data-table/components/TableBody.vue
@@ -1,7 +1,7 @@
 <template>
   <tbody>
-  <tr v-for="(row, index) in data"
-      :key="index"
+  <tr v-for="(row, rowIndex) in data"
+      :key="rowIndex"
       :class="[ 'border-b hover:bg-gray-50',
         BaseSize[size]
       ]">
@@ -10,10 +10,12 @@
         :style="col.width ? { width: calcSize(col.width) } : {}"
         :class="[ TablePaddingSize[size],
           `text-${col.align || 'left'}`,
-          col.ellipsis !== false ? 'relative max-w-lg truncate whitespace-nowrap overflow-hidden' : 'break-words whitespace-normal'
+          col.ellipsis !== false ? 'relative max-w-lg truncate whitespace-nowrap overflow-hidden' : 'break-words whitespace-normal',
+          (selectedCell.rowIndex === rowIndex && selectedCell.col === col.key) && 'border border-blue-400'
         ]"
         @mousemove.stop.prevent="(col.ellipsis !== false && col.tooltip) && showTooltip($event, row[col.key])"
-        @mouseleave.stop.prevent="hideTooltip">
+        @mouseleave.stop.prevent="hideTooltip"
+        @click="selectCell(rowIndex, col.key, row)">
       {{ row[col.key] }}
     </td>
   </tr>
@@ -21,16 +23,31 @@
 </template>
 
 <script setup lang="ts">
-import { DataTableProps } from '../types'
+import { DataTableCellEmits, DataTableProps } from '../types'
 import { BaseSize } from '@/ui/common/size.ts'
 import { TablePaddingSize } from '@/ui/data-table/size.ts'
 import { calcSize } from '@/utils/common.ts'
-import { onBeforeUnmount, onMounted } from 'vue'
+import { onBeforeUnmount, onMounted, ref } from 'vue'
+
+const emits = defineEmits<DataTableCellEmits>()
 
 withDefaults(defineProps<DataTableProps>(), {
   size: 'default'
 })
 
+// 选中单元格的状态
+const selectedCell = ref<{ rowIndex: number | null; row: any; col: string | null }>({
+  rowIndex: null,
+  row: null,
+  col: null
+})
+
+const selectCell = (rowIndex: number, col: string, row: any) => {
+  selectedCell.value = { rowIndex, row, col }
+
+  emits('on-cell-click', { rowIndex, row, col })
+}
+
 let tooltipEl: HTMLElement | null = null
 
 // 创建 tooltip 元素
diff --git a/src/ui/data-table/types.ts b/src/ui/data-table/types.ts
index 90c9c043..b916596b 100644
--- a/src/ui/data-table/types.ts
+++ b/src/ui/data-table/types.ts
@@ -23,4 +23,9 @@ export interface DataTableProps
 
 export type DataTableEmits = {
     (e: 'on-sort', column: ColumnProps[]): void
+    (e: 'on-cell-click', payload: { rowIndex: number; col: string; row: any }): void
+}
+
+export type DataTableCellEmits = {
+    (e: 'on-cell-click', payload: { rowIndex: number; col: string; row: any }): void
 }
\ No newline at end of file

From 0c963cdae111748d83a96ad661b3db21f1caf1ff Mon Sep 17 00:00:00 2001
From: qianmoQ <shicheng@devlive.org>
Date: Mon, 13 Jan 2025 09:39:06 +0800
Subject: [PATCH 08/27] =?UTF-8?q?=E7=BB=84=E4=BB=B6(=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E8=A1=A8=E6=A0=BC):=20=E6=94=AF=E6=8C=81=E6=8B=96=E6=8B=BD?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4=E5=88=97=E5=AE=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                                  |  4 +-
 src/ui/data-table/ShadcnDataTable.vue        | 45 +-------------
 src/ui/data-table/components/TableHeader.vue | 19 ++++--
 src/ui/data-table/hooks/useResize.ts         | 63 ++++++++++++++++++++
 src/ui/data-table/types.ts                   |  1 +
 5 files changed, 83 insertions(+), 49 deletions(-)
 create mode 100644 src/ui/data-table/hooks/useResize.ts

diff --git a/src/App.vue b/src/App.vue
index 2e6fa72b..9a48c804 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -13,8 +13,8 @@ import { ref } from 'vue'
 
 const columns = ref([
   { key: 'title', label: '标题' },
-  { key: 'author', label: '作者', sortable: true },
-  { key: 'description', label: '描述', width: 500, tooltip: true },
+  { key: 'author', label: '作者', sortable: true, resizable: true },
+  { key: 'description', label: '描述', width: 500, tooltip: true, resizable: true },
   { key: 'category', label: '分类', sortable: true, align: 'center' },
   { key: 'date', label: '发布日期', sortable: true }
 ])
diff --git a/src/ui/data-table/ShadcnDataTable.vue b/src/ui/data-table/ShadcnDataTable.vue
index 2b05baaa..49d65aeb 100644
--- a/src/ui/data-table/ShadcnDataTable.vue
+++ b/src/ui/data-table/ShadcnDataTable.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="overflow-auto custom-scrollbar">
+  <div class="overflow-auto">
     <div :style="{minWidth: 'calc(100vh)'}">
       <table class="w-full border-collapse table-fixed">
         <TableHeader :columns="columns"
@@ -61,45 +61,4 @@ const sortedData = computed(() => {
     return 0
   })
 })
-</script>
-
-<style scoped>
-.custom-scrollbar {
-  @apply overflow-auto;
-
-  /* 禁用滚动条悬停时的高度变化 */
-
-  &::-webkit-scrollbar {
-    @apply h-2 w-2;
-
-    &:hover {
-      @apply h-2 w-2;
-      /* 确保悬停时保持相同高度 */
-    }
-  }
-
-  &::-webkit-scrollbar-track {
-    @apply bg-gray-100 rounded-full;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    @apply bg-gray-300 rounded-full;
-
-    &:hover {
-      @apply bg-gray-400;
-      /* 只改变颜色，不改变大小 */
-    }
-  }
-
-  /* Firefox */
-  scrollbar-width: thin !important; /* 使用 !important 确保大小不变 */
-  scrollbar-color: #d1d5db #f3f4f6;
-}
-
-/* 禁用所有可能的状态下的大小变化 */
-.custom-scrollbar:hover::-webkit-scrollbar,
-.custom-scrollbar:active::-webkit-scrollbar,
-.custom-scrollbar:focus::-webkit-scrollbar {
-  @apply h-2 w-2;
-}
-</style>
\ No newline at end of file
+</script>
\ No newline at end of file
diff --git a/src/ui/data-table/components/TableHeader.vue b/src/ui/data-table/components/TableHeader.vue
index f60f2c86..a1be3331 100644
--- a/src/ui/data-table/components/TableHeader.vue
+++ b/src/ui/data-table/components/TableHeader.vue
@@ -4,9 +4,10 @@
     <th v-for="col in columns"
         :key="col.key"
         :style="col.width ? { width: calcSize(col.width) } : {}"
-        :class="[ `text-${col.align || 'left'} font-medium`,
-            TablePaddingSize[size],
-            col.sortable && 'cursor-pointer select-none'
+        :class="[
+              `text-${col.align || 'left'} font-medium relative`,
+              TablePaddingSize[size],
+              col.sortable && 'cursor-pointer select-none'
           ]"
         @click="col.sortable && handleSort(col, $event)">
       <div class="inline-flex items-center">
@@ -17,12 +18,19 @@
                           col.sort ? 'opacity-100' : 'opacity-0',
                           col.sort === 'asc' && 'text-blue-500',
                           col.sort === 'desc' && 'rotate-180 text-blue-500'
-                      ]"
+                        ]"
                       icon="MoveUp"
                       size="16">
           </ShadcnIcon>
         </div>
       </div>
+
+      <!-- 拖拽手柄 -->
+      <div v-if="col.resizable"
+           class="absolute top-0 right-0 h-full w-4 cursor-col-resize flex items-center justify-center group"
+           @mousedown.stop.prevent="handleMouseDown($event, col)">
+        <div class="h-2/3 w-px bg-gray-300 group-hover:bg-blue-500"></div>
+      </div>
     </th>
   </tr>
   </thead>
@@ -33,6 +41,7 @@ import type { ColumnProps } from '../types'
 import { Size, TablePaddingSize } from '@/ui/data-table/size.ts'
 import ShadcnIcon from '@/ui/icon'
 import { calcSize } from '@/utils/common.ts'
+import { useResize } from '../hooks/useResize'
 
 withDefaults(defineProps<{
   columns: ColumnProps[],
@@ -48,4 +57,6 @@ const emits = defineEmits<{
 const handleSort = (column: ColumnProps, event: MouseEvent) => {
   emits('on-sort-change', column, event)
 }
+
+const { handleMouseDown } = useResize()
 </script>
\ No newline at end of file
diff --git a/src/ui/data-table/hooks/useResize.ts b/src/ui/data-table/hooks/useResize.ts
new file mode 100644
index 00000000..aa9b82d1
--- /dev/null
+++ b/src/ui/data-table/hooks/useResize.ts
@@ -0,0 +1,63 @@
+import { onUnmounted, ref } from 'vue'
+import type { ColumnProps } from '../types'
+
+export function useResize()
+{
+    const isResizing = ref(false)
+    const currentColumn = ref<ColumnProps | null>(null)
+    const startX = ref(0)
+    const startWidth = ref(0)
+
+    const handleMouseDown = (e: MouseEvent, column: ColumnProps) => {
+        if (!column.resizable) {
+            return
+        }
+
+        e.stopPropagation()
+        isResizing.value = true
+        currentColumn.value = column
+        startX.value = e.clientX
+
+        const headerCell = (e.target as HTMLElement).closest('th')
+        if (headerCell) {
+            startWidth.value = headerCell.offsetWidth
+        }
+
+        document.addEventListener('mousemove', handleMouseMove)
+        document.addEventListener('mouseup', handleMouseUp)
+    }
+
+    const handleMouseMove = (e: MouseEvent) => {
+        if (!isResizing.value || !currentColumn.value) {
+            return
+        }
+
+        e.preventDefault()
+
+        const diffX = e.clientX - startX.value
+        const newWidth = Math.max(100, startWidth.value + diffX)
+
+        if (currentColumn.value) {
+            currentColumn.value.width = `${ newWidth }px`
+        }
+    }
+
+    const handleMouseUp = () => {
+        isResizing.value = false
+        currentColumn.value = null
+
+        document.removeEventListener('mousemove', handleMouseMove)
+        document.removeEventListener('mouseup', handleMouseUp)
+    }
+
+    onUnmounted(() => {
+        document.removeEventListener('mousemove', handleMouseMove)
+        document.removeEventListener('mouseup', handleMouseUp)
+    })
+
+    return {
+        isResizing,
+        currentColumn,
+        handleMouseDown
+    }
+}
\ No newline at end of file
diff --git a/src/ui/data-table/types.ts b/src/ui/data-table/types.ts
index b916596b..df4448d9 100644
--- a/src/ui/data-table/types.ts
+++ b/src/ui/data-table/types.ts
@@ -12,6 +12,7 @@ export interface ColumnProps
     width?: string // 宽度，支持输入数字和字符串会自动计算，如果是数字的情况时，单位为 px
     tooltip?: string
     align?: 'left' | 'center' | 'right'
+    resizable?: boolean
 }
 
 export interface DataTableProps

From 118bad717f3d52a1c05f87f647b0b2d32de1ca2c Mon Sep 17 00:00:00 2001
From: qianmoQ <shicheng@devlive.org>
Date: Tue, 14 Jan 2025 09:28:35 +0800
Subject: [PATCH 09/27] =?UTF-8?q?=E7=BB=84=E4=BB=B6(=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E8=A1=A8=E6=A0=BC):=20=E6=8B=86=E5=88=86=E6=8F=90=E7=A4=BA?=
 =?UTF-8?q?=E4=B8=BA=E5=8D=95=E7=8B=AC=E7=9A=84=20hook?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/components/data/data-table.md           |  21 ++++
 src/App.vue                                  |   7 +-
 src/ui/data-table/ShadcnDataTable.vue        |   9 +-
 src/ui/data-table/components/TableBody.vue   | 112 ++++++-------------
 src/ui/data-table/components/TableHeader.vue |  59 +++++-----
 src/ui/data-table/hooks/useResize.ts         |  34 +++++-
 src/ui/data-table/hooks/useTooltip.ts        |  64 +++++++++++
 src/ui/data-table/types.ts                   |   8 +-
 8 files changed, 196 insertions(+), 118 deletions(-)
 create mode 100644 src/ui/data-table/hooks/useTooltip.ts

diff --git a/docs/components/data/data-table.md b/docs/components/data/data-table.md
index 88b4ac1b..9df48513 100644
--- a/docs/components/data/data-table.md
+++ b/docs/components/data/data-table.md
@@ -145,6 +145,17 @@ title: 数据表格 (Data Table)
 
 :::
 
+## 重置宽度 (resizable)
+
+::: raw
+
+<CodeRunner title="重置宽度 (resizable)" codeKey="data-table-resizable" warning="只需要在列上添加 resizable 属性即可">
+    <ShadcnDataTable :columns="resizableColumns" :data="data">
+    </ShadcnDataTable>
+</CodeRunner>
+
+:::
+
 ## 数据表格 (Data Table) 属性
 
 <ApiTable title="数据表格 (Data Table) 属性"
@@ -169,6 +180,7 @@ title: 数据表格 (Data Table)
         ['width', '宽度，支持输入数字和字符串会自动计算，如果是数字的情况时，单位为 px', 'string', 'auto', '-'],
         ['tooltip', '列内容是否显示提示', 'boolean', 'false', '-'],
         ['align', '对齐方式，可选值为', 'enum', 'left', 'left | right | center'],
+        ['resizable', '列是否可调整宽度', 'boolean', 'false', '-'],
     ]">
 </ApiTable>
 
@@ -179,6 +191,7 @@ title: 数据表格 (Data Table)
     :columns="[
         ['on-sort', '当表格排序发生变化时触发', '排序列的列表'],
         ['on-cell-click', '当单元格被点击时触发', '行索引，列的 key 值，行数据'],
+        ['on-resizable', '当列宽度发生变化时触发', '当前列的信息，调整后列的宽度'],
     ]">
 </ApiTable>
 
@@ -233,6 +246,14 @@ const alignColumns = ref([
   { key: 'date', label: '发布日期', align: 'center' }
 ])
 
+const resizableColumns = ref([
+  { key: 'title', label: '标题' },
+  { key: 'author', label: '作者' },
+  { key: 'description', label: '描述' },
+  { key: 'category', label: '分类' },
+  { key: 'date', label: '发布日期', resizable: true }
+])
+
 const data = ref([
   {
     title: '深入理解 Vue.js 响应式系统的原理与实现',
diff --git a/src/App.vue b/src/App.vue
index 9a48c804..660f0f8b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -3,7 +3,8 @@
     <ShadcnDataTable :columns="columns"
                      :data="data"
                      size="small"
-                     @on-cell-click="handleCellClick">
+                     @on-cell-click="handleCellClick"
+                     @on-resizable="handleResizable">
     </ShadcnDataTable>
   </div>
 </template>
@@ -60,4 +61,8 @@ const data = ref([
 const handleCellClick = (playload: { rowIndex: number; col: string; row: any }) => {
   console.log(`点击了第 ${ playload.rowIndex + 1 } 行，${ playload.col } 列`)
 }
+
+const handleResizable = (column: any, width: number) => {
+  console.log(`调整了 ${ column.label } 列的宽度为 ${ width }`)
+}
 </script>
\ No newline at end of file
diff --git a/src/ui/data-table/ShadcnDataTable.vue b/src/ui/data-table/ShadcnDataTable.vue
index 49d65aeb..435e7763 100644
--- a/src/ui/data-table/ShadcnDataTable.vue
+++ b/src/ui/data-table/ShadcnDataTable.vue
@@ -1,10 +1,11 @@
 <template>
   <div class="overflow-auto">
-    <div :style="{minWidth: 'calc(100vh)'}">
-      <table class="w-full border-collapse table-fixed">
+    <div class="relative w-full" style="overflow-x: auto">
+      <div class="inline-block min-w-full bg-white">
         <TableHeader :columns="columns"
                      :size="size"
-                     @on-sort-change="handleSortChange">
+                     @on-sort="handleSortChange"
+                     @on-resizable="(column, width) => emits('on-resizable', column, width)">
         </TableHeader>
 
         <TableBody :columns="columns"
@@ -12,7 +13,7 @@
                    :size="size"
                    @on-cell-click="emits('on-cell-click', $event)">
         </TableBody>
-      </table>
+      </div>
     </div>
   </div>
 </template>
diff --git a/src/ui/data-table/components/TableBody.vue b/src/ui/data-table/components/TableBody.vue
index d93f498b..a0ebd990 100644
--- a/src/ui/data-table/components/TableBody.vue
+++ b/src/ui/data-table/components/TableBody.vue
@@ -1,41 +1,46 @@
 <template>
-  <tbody>
-  <tr v-for="(row, rowIndex) in data"
-      :key="rowIndex"
-      :class="[ 'border-b hover:bg-gray-50',
-        BaseSize[size]
-      ]">
-    <td v-for="col in columns"
-        :key="col.key"
-        :style="col.width ? { width: calcSize(col.width) } : {}"
-        :class="[ TablePaddingSize[size],
-          `text-${col.align || 'left'}`,
-          col.ellipsis !== false ? 'relative max-w-lg truncate whitespace-nowrap overflow-hidden' : 'break-words whitespace-normal',
-          (selectedCell.rowIndex === rowIndex && selectedCell.col === col.key) && 'border border-blue-400'
-        ]"
-        @mousemove.stop.prevent="(col.ellipsis !== false && col.tooltip) && showTooltip($event, row[col.key])"
-        @mouseleave.stop.prevent="hideTooltip"
-        @click="selectCell(rowIndex, col.key, row)">
-      {{ row[col.key] }}
-    </td>
-  </tr>
-  </tbody>
+  <div class="flex flex-col w-full">
+    <div v-for="(row, rowIndex) in data"
+         :key="rowIndex"
+         :class="[
+           'flex border-b hover:bg-gray-50 items-center h-full',
+           BaseSize[size]
+         ]">
+      <div v-for="col in columns"
+           :key="col.key"
+           :style="{
+             width: calcSize(col.width || 150),
+             flex: 'none'
+           }"
+           :class="[
+             TablePaddingSize[size],
+             `text-${col.align || 'left'}`,
+             col.ellipsis !== false ? 'relative truncate whitespace-nowrap overflow-hidden' : 'break-words whitespace-normal',
+             (selectedCell.rowIndex === rowIndex && selectedCell.col === col.key) && 'border border-blue-400'
+           ]"
+           @mousemove.stop.prevent="(col.ellipsis !== false && col.tooltip) && showTooltip($event, row[col.key])"
+           @mouseleave.stop.prevent="hideTooltip"
+           @click="selectCell(rowIndex, col.key, row)">
+        {{ row[col.key] }}
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { DataTableCellEmits, DataTableProps } from '../types'
+import { DataTableBodyEmits, DataTableProps } from '../types'
 import { BaseSize } from '@/ui/common/size.ts'
-import { TablePaddingSize } from '@/ui/data-table/size.ts'
+import { TablePaddingSize } from '../size'
+import { ref } from 'vue'
+import { useTooltip } from '@/ui/data-table/hooks/useTooltip.ts'
 import { calcSize } from '@/utils/common.ts'
-import { onBeforeUnmount, onMounted, ref } from 'vue'
 
-const emits = defineEmits<DataTableCellEmits>()
+const emits = defineEmits<DataTableBodyEmits>()
 
 withDefaults(defineProps<DataTableProps>(), {
   size: 'default'
 })
 
-// 选中单元格的状态
 const selectedCell = ref<{ rowIndex: number | null; row: any; col: string | null }>({
   rowIndex: null,
   row: null,
@@ -44,61 +49,8 @@ const selectedCell = ref<{ rowIndex: number | null; row: any; col: string | null
 
 const selectCell = (rowIndex: number, col: string, row: any) => {
   selectedCell.value = { rowIndex, row, col }
-
   emits('on-cell-click', { rowIndex, row, col })
 }
 
-let tooltipEl: HTMLElement | null = null
-
-// 创建 tooltip 元素
-onMounted(() => {
-  tooltipEl = document.createElement('div')
-  tooltipEl.className = 'hidden fixed z-50 bg-gray-800 text-white text-sm rounded-lg py-2 px-3 max-w-xs whitespace-normal'
-  document.body.appendChild(tooltipEl)
-})
-
-// 清理 tooltip 元素
-onBeforeUnmount(() => {
-  tooltipEl?.remove()
-})
-
-// 显示 tooltip
-const showTooltip = (event: MouseEvent, content: string) => {
-  if (!tooltipEl) {
-    return
-  }
-
-  tooltipEl.textContent = content
-  tooltipEl.className = 'fixed z-50 bg-gray-800 text-white text-sm rounded-lg py-2 px-3 max-w-xs whitespace-normal'
-
-  const tooltipRect = tooltipEl.getBoundingClientRect()
-
-  // 计算位置，使 tooltip 在鼠标位置居中并默认显示在上方
-  let left = event.clientX - (tooltipRect.width / 2)
-  let top = event.clientY - tooltipRect.height - 12 // 默认在鼠标上方，留出 12px 间距
-
-  // 检查右边界
-  if (left + tooltipRect.width > window.innerWidth) {
-    left = window.innerWidth - tooltipRect.width - 8
-  }
-  // 检查左边界
-  if (left < 8) {
-    left = 8
-  }
-
-  // 如果上方空间不足，则显示在下方
-  if (top < 8) {
-    top = event.clientY + 12 // 显示在鼠标下方
-  }
-
-  tooltipEl!.style.left = `${ left }px`
-  tooltipEl!.style.top = `${ top }px`
-}
-
-// 隐藏 tooltip
-const hideTooltip = () => {
-  if (tooltipEl) {
-    tooltipEl.className = 'hidden fixed z-50 bg-gray-800 text-white text-sm rounded-lg py-2 px-3 max-w-xs whitespace-normal'
-  }
-}
+const { showTooltip, hideTooltip } = useTooltip()
 </script>
\ No newline at end of file
diff --git a/src/ui/data-table/components/TableHeader.vue b/src/ui/data-table/components/TableHeader.vue
index a1be3331..c3d6322e 100644
--- a/src/ui/data-table/components/TableHeader.vue
+++ b/src/ui/data-table/components/TableHeader.vue
@@ -1,24 +1,27 @@
 <template>
-  <thead>
-  <tr class="border-b bg-gray-100">
-    <th v-for="col in columns"
-        :key="col.key"
-        :style="col.width ? { width: calcSize(col.width) } : {}"
-        :class="[
-              `text-${col.align || 'left'} font-medium relative`,
-              TablePaddingSize[size],
-              col.sortable && 'cursor-pointer select-none'
-          ]"
-        @click="col.sortable && handleSort(col, $event)">
+  <div class="flex border-b bg-gray-100 relative w-full">
+    <div v-for="col in columns"
+         :key="col.key"
+         :style="[
+           { width: calcSize(col.width || 150) },
+           { position: 'relative', flexShrink: 0 }
+         ]"
+         :class="[
+           `text-${col.align || 'left'} font-medium`,
+           TablePaddingSize[size],
+           col.sortable && 'cursor-pointer select-none'
+         ]"
+         @click.stop="col.sortable && handleSort(col, $event)">
       <div class="inline-flex items-center">
         <span>{{ col.label }}</span>
         <div v-if="col.sortable"
              class="inline-flex items-center ml-2 min-w-[1em]">
-          <ShadcnIcon :class="['font-semibold transition-transform',
-                          col.sort ? 'opacity-100' : 'opacity-0',
-                          col.sort === 'asc' && 'text-blue-500',
-                          col.sort === 'desc' && 'rotate-180 text-blue-500'
-                        ]"
+          <ShadcnIcon :class="[
+                        'font-semibold transition-transform',
+                        col.sort ? 'opacity-100' : 'opacity-0',
+                        col.sort === 'asc' && 'text-blue-500',
+                        col.sort === 'desc' && 'rotate-180 text-blue-500'
+                      ]"
                       icon="MoveUp"
                       size="16">
           </ShadcnIcon>
@@ -27,17 +30,18 @@
 
       <!-- 拖拽手柄 -->
       <div v-if="col.resizable"
-           class="absolute top-0 right-0 h-full w-4 cursor-col-resize flex items-center justify-center group"
-           @mousedown.stop.prevent="handleMouseDown($event, col)">
+           data-resize-handle
+           class="absolute top-0 right-0 h-full w-1 cursor-col-resize flex items-center justify-center group"
+           @click.stop
+           @mousedown.stop="handleMouseDown($event, col)">
         <div class="h-2/3 w-px bg-gray-300 group-hover:bg-blue-500"></div>
       </div>
-    </th>
-  </tr>
-  </thead>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
-import type { ColumnProps } from '../types'
+import { ColumnProps, DataTableHeaderEmits } from '../types'
 import { Size, TablePaddingSize } from '@/ui/data-table/size.ts'
 import ShadcnIcon from '@/ui/icon'
 import { calcSize } from '@/utils/common.ts'
@@ -50,13 +54,14 @@ withDefaults(defineProps<{
   size: 'default'
 })
 
-const emits = defineEmits<{
-  (e: 'on-sort-change', column: ColumnProps, event: MouseEvent): void
-}>()
+const emits = defineEmits<DataTableHeaderEmits>()
 
 const handleSort = (column: ColumnProps, event: MouseEvent) => {
-  emits('on-sort-change', column, event)
+  event.stopPropagation()
+  emits('on-sort', column, event)
 }
 
-const { handleMouseDown } = useResize()
+const { handleMouseDown } = useResize((_event, column, width) => {
+  emits('on-resizable', column, width)
+})
 </script>
\ No newline at end of file
diff --git a/src/ui/data-table/hooks/useResize.ts b/src/ui/data-table/hooks/useResize.ts
index aa9b82d1..ba2d7637 100644
--- a/src/ui/data-table/hooks/useResize.ts
+++ b/src/ui/data-table/hooks/useResize.ts
@@ -1,12 +1,14 @@
 import { onUnmounted, ref } from 'vue'
 import type { ColumnProps } from '../types'
+import { calcSize } from '@/utils/common.ts'
 
-export function useResize()
+export function useResize(emit: (event: 'on-resizable', column: ColumnProps, width: number) => void)
 {
     const isResizing = ref(false)
     const currentColumn = ref<ColumnProps | null>(null)
     const startX = ref(0)
     const startWidth = ref(0)
+    const resizeElement = ref<HTMLElement | null>(null)
 
     const handleMouseDown = (e: MouseEvent, column: ColumnProps) => {
         if (!column.resizable) {
@@ -18,9 +20,12 @@ export function useResize()
         currentColumn.value = column
         startX.value = e.clientX
 
-        const headerCell = (e.target as HTMLElement).closest('th')
+        // 获取当前拖拽的列元素
+        const headerCell = (e.target as HTMLElement).closest('[data-resize-handle]')?.parentElement
         if (headerCell) {
-            startWidth.value = headerCell.offsetWidth
+            resizeElement.value = headerCell
+            // 修改这里：从 column.width 获取初始宽度，如果没有则使用默认值
+            startWidth.value = column.width ? parseInt(column.width) : 150
         }
 
         document.addEventListener('mousemove', handleMouseMove)
@@ -28,23 +33,42 @@ export function useResize()
     }
 
     const handleMouseMove = (e: MouseEvent) => {
-        if (!isResizing.value || !currentColumn.value) {
+        if (!isResizing.value || !currentColumn.value || !resizeElement.value) {
             return
         }
 
         e.preventDefault()
 
+        // 计算鼠标移动的距离
         const diffX = e.clientX - startX.value
+
+        // 确保最小宽度
         const newWidth = Math.max(100, startWidth.value + diffX)
 
+        // 直接设置列宽
         if (currentColumn.value) {
-            currentColumn.value.width = `${ newWidth }px`
+            // 更新列的宽度属性
+            currentColumn.value.width = `${ calcSize(newWidth) }`
+
+            // 同时更新 DOM 元素的宽度
+            if (resizeElement.value) {
+                resizeElement.value.style.width = `${ calcSize(newWidth) }`
+            }
+
+            // 触发 on-resizable 事件
+            emit('on-resizable', currentColumn.value, newWidth)
         }
     }
 
     const handleMouseUp = () => {
+        if (currentColumn.value) {
+            // 在松开鼠标时也触发一次事件，标记调整结束
+            emit('on-resizable', currentColumn.value, parseInt(currentColumn.value.width || '150'))
+        }
+
         isResizing.value = false
         currentColumn.value = null
+        resizeElement.value = null
 
         document.removeEventListener('mousemove', handleMouseMove)
         document.removeEventListener('mouseup', handleMouseUp)
diff --git a/src/ui/data-table/hooks/useTooltip.ts b/src/ui/data-table/hooks/useTooltip.ts
new file mode 100644
index 00000000..eacfdbee
--- /dev/null
+++ b/src/ui/data-table/hooks/useTooltip.ts
@@ -0,0 +1,64 @@
+import { onBeforeUnmount, onMounted, ref } from 'vue'
+import { calcSize } from '@/utils/common.ts'
+
+export function useTooltip()
+{
+    let tooltipEl = ref<HTMLElement | null>(null)
+
+    // 创建 tooltip 元素
+    onMounted(() => {
+        tooltipEl.value = document.createElement('div')
+        tooltipEl.value.className = 'hidden fixed z-50 bg-gray-800 text-white text-sm rounded-lg py-2 px-3 max-w-xs whitespace-normal'
+        document.body.appendChild(tooltipEl.value)
+    })
+
+    // 清理 tooltip 元素
+    onBeforeUnmount(() => {
+        tooltipEl.value?.remove()
+    })
+
+    // 显示 tooltip
+    const showTooltip = (event: MouseEvent, content: string) => {
+        if (!tooltipEl.value) {
+            return
+        }
+
+        tooltipEl.value.textContent = content
+        tooltipEl.value.className = 'fixed z-50 bg-gray-800 text-white text-sm rounded-lg py-2 px-3 max-w-xs whitespace-normal'
+
+        const tooltipRect = tooltipEl.value.getBoundingClientRect()
+
+        // 计算位置，使 tooltip 在鼠标位置居中并默认显示在上方
+        let left = event.clientX - (tooltipRect.width / 2)
+        let top = event.clientY - tooltipRect.height - 12 // 默认在鼠标上方，留出 12px 间距
+
+        // 检查右边界
+        if (left + tooltipRect.width > window.innerWidth) {
+            left = window.innerWidth - tooltipRect.width - 8
+        }
+        // 检查左边界
+        if (left < 8) {
+            left = 8
+        }
+
+        // 如果上方空间不足，则显示在下方
+        if (top < 8) {
+            top = event.clientY + 12 // 显示在鼠标下方
+        }
+
+        tooltipEl.value.style.left = `${ calcSize(left) }`
+        tooltipEl.value.style.top = `${ calcSize(top) }`
+    }
+
+    // 隐藏 tooltip
+    const hideTooltip = () => {
+        if (tooltipEl.value) {
+            tooltipEl.value.className = 'hidden fixed z-50 bg-gray-800 text-white text-sm rounded-lg py-2 px-3 max-w-xs whitespace-normal'
+        }
+    }
+
+    return {
+        showTooltip,
+        hideTooltip
+    }
+}
\ No newline at end of file
diff --git a/src/ui/data-table/types.ts b/src/ui/data-table/types.ts
index df4448d9..a10fbb8d 100644
--- a/src/ui/data-table/types.ts
+++ b/src/ui/data-table/types.ts
@@ -24,9 +24,15 @@ export interface DataTableProps
 
 export type DataTableEmits = {
     (e: 'on-sort', column: ColumnProps[]): void
+    (e: 'on-resizable', column: ColumnProps, width: number): void
     (e: 'on-cell-click', payload: { rowIndex: number; col: string; row: any }): void
 }
 
-export type DataTableCellEmits = {
+export type DataTableHeaderEmits = {
+    (e: 'on-sort', column: ColumnProps, event: MouseEvent): void
+    (e: 'on-resizable', column: ColumnProps, width: number): void
+}
+
+export type DataTableBodyEmits = {
     (e: 'on-cell-click', payload: { rowIndex: number; col: string; row: any }): void
 }
\ No newline at end of file

From 85919d43086ba74a18adf810bfdfcd2e82f8586d Mon Sep 17 00:00:00 2001
From: qianmoQ <shicheng@devlive.org>
Date: Tue, 14 Jan 2025 09:42:55 +0800
Subject: [PATCH 10/27] =?UTF-8?q?=E7=BB=84=E4=BB=B6(=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E8=A1=A8=E6=A0=BC):=20=E6=94=AF=E6=8C=81=E9=AB=98=E5=BA=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/components/data/data-table.md    | 28 +++++++++++++++++++--------
 src/App.vue                           |  6 ++++++
 src/ui/data-table/ShadcnDataTable.vue |  6 ++++--
 src/ui/data-table/types.ts            |  1 +
 4 files changed, 31 insertions(+), 10 deletions(-)

diff --git a/docs/components/data/data-table.md b/docs/components/data/data-table.md
index 9df48513..528de1bb 100644
--- a/docs/components/data/data-table.md
+++ b/docs/components/data/data-table.md
@@ -90,11 +90,22 @@ title: 数据表格 (Data Table)
 
 :::
 
-## 排序 (sort)
+## 高度 (height)
 
 ::: raw
 
-<CodeRunner title="排序 (sort)" codeKey="data-table-sort" warning="只需要在列上添加 sortable 属性即可，多列排序需要按住 Shift 键">
+<CodeRunner title="高度 (height)" codeKey="data-table-height">
+    <ShadcnDataTable :columns="columns" :data="data" height="200">
+    </ShadcnDataTable>
+</CodeRunner>
+
+:::
+
+## 列排序 (sort)
+
+::: raw
+
+<CodeRunner title="列排序 (sort)" codeKey="data-table-sort" warning="只需要在列上添加 sortable 属性即可，多列排序需要按住 Shift 键">
     <ShadcnDataTable :columns="sortColumns" :data="data">
     </ShadcnDataTable>
 </CodeRunner>
@@ -123,33 +134,33 @@ title: 数据表格 (Data Table)
 
 :::
 
-## 显示提示 (tooltip)
+## 列提示 (tooltip)
 
 ::: raw
 
-<CodeRunner title="显示提示 (tooltip)" codeKey="data-table-tooltip" warning="只需要在列上添加 tooltip 属性即可">
+<CodeRunner title="列提示 (tooltip)" codeKey="data-table-tooltip" warning="只需要在列上添加 tooltip 属性即可">
     <ShadcnDataTable :columns="tooltipColumns" :data="data">
     </ShadcnDataTable>
 </CodeRunner>
 
 :::
 
-## 对齐方式 (align)
+## 列对齐方式 (align)
 
 ::: raw
 
-<CodeRunner title="对齐方式 (align)" codeKey="data-table-align" warning="只需要在列上添加 align 属性即可">
+<CodeRunner title="列对齐方式 (align)" codeKey="data-table-align" warning="只需要在列上添加 align 属性即可">
     <ShadcnDataTable :columns="alignColumns" :data="data">
     </ShadcnDataTable>
 </CodeRunner>
 
 :::
 
-## 重置宽度 (resizable)
+## 列宽度调整 (resizable)
 
 ::: raw
 
-<CodeRunner title="重置宽度 (resizable)" codeKey="data-table-resizable" warning="只需要在列上添加 resizable 属性即可">
+<CodeRunner title="列宽度调整 (resizable)" codeKey="data-table-resizable" warning="只需要在列上添加 resizable 属性即可">
     <ShadcnDataTable :columns="resizableColumns" :data="data">
     </ShadcnDataTable>
 </CodeRunner>
@@ -164,6 +175,7 @@ title: 数据表格 (Data Table)
         ['columns', '表格列数据', '\[\]', '\[\]', '-'],
         ['data', '表格数据', '\[\]', '\[\]', '-'],
         ['size', '表格尺寸', 'enum', 'default', 'default | small | large'],
+        ['height', '表格高度，支持输入数字和字符串会自动计算，如果是数字的情况时，单位为 px', 'string', 'auto', '-'],
     ]">
 </ApiTable>
 
diff --git a/src/App.vue b/src/App.vue
index 660f0f8b..ce2f9989 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -3,6 +3,7 @@
     <ShadcnDataTable :columns="columns"
                      :data="data"
                      size="small"
+                     height="300"
                      @on-cell-click="handleCellClick"
                      @on-resizable="handleResizable">
     </ShadcnDataTable>
@@ -58,6 +59,11 @@ const data = ref([
   }
 ])
 
+for (let i = 0; i < 1000; i++) {
+  const randomIndex = Math.floor(Math.random() * data.value.length)
+  data.value.push(data.value[randomIndex])
+}
+
 const handleCellClick = (playload: { rowIndex: number; col: string; row: any }) => {
   console.log(`点击了第 ${ playload.rowIndex + 1 } 行，${ playload.col } 列`)
 }
diff --git a/src/ui/data-table/ShadcnDataTable.vue b/src/ui/data-table/ShadcnDataTable.vue
index 435e7763..4669521b 100644
--- a/src/ui/data-table/ShadcnDataTable.vue
+++ b/src/ui/data-table/ShadcnDataTable.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="overflow-auto">
     <div class="relative w-full" style="overflow-x: auto">
-      <div class="inline-block min-w-full bg-white">
+      <div class="inline-block min-w-full bg-white" :style="{ height: calcSize(height) }">
         <TableHeader :columns="columns"
                      :size="size"
                      @on-sort="handleSortChange"
@@ -24,9 +24,11 @@ import TableHeader from './components/TableHeader.vue'
 import TableBody from './components/TableBody.vue'
 import type { ColumnProps, DataTableEmits, DataTableProps } from './types'
 import { useSort } from './hooks/useSort'
+import { calcSize } from '@/utils/common.ts'
 
 const props = withDefaults(defineProps<DataTableProps>(), {
-  size: 'default'
+  size: 'default',
+  height: 'auto'
 })
 
 const emits = defineEmits<DataTableEmits>()
diff --git a/src/ui/data-table/types.ts b/src/ui/data-table/types.ts
index a10fbb8d..49e3b03c 100644
--- a/src/ui/data-table/types.ts
+++ b/src/ui/data-table/types.ts
@@ -20,6 +20,7 @@ export interface DataTableProps
     columns: ColumnProps[]
     data: Record<string, any>[]
     size?: Size
+    height?: number | string
 }
 
 export type DataTableEmits = {

From a4595720a1a5eae876f7b7b4886505097ff733d6 Mon Sep 17 00:00:00 2001
From: qianmoQ <shicheng@devlive.org>
Date: Tue, 14 Jan 2025 09:53:16 +0800
Subject: [PATCH 11/27] =?UTF-8?q?=E7=BB=84=E4=BB=B6(=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E8=A1=A8=E6=A0=BC):=20=E6=94=AF=E6=8C=81=E5=AE=BD=E5=BA=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/components/data/data-table.md    | 16 ++++++++++++++--
 src/App.vue                           |  1 +
 src/ui/data-table/ShadcnDataTable.vue |  9 +++++----
 src/ui/data-table/types.ts            |  1 +
 4 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/docs/components/data/data-table.md b/docs/components/data/data-table.md
index 528de1bb..3f6cbe4a 100644
--- a/docs/components/data/data-table.md
+++ b/docs/components/data/data-table.md
@@ -101,6 +101,17 @@ title: 数据表格 (Data Table)
 
 :::
 
+## 宽度 (width)
+
+::: raw
+
+<CodeRunner title="宽度 (width)" codeKey="data-table-width">
+    <ShadcnDataTable :columns="columns" :data="data" width="400">
+    </ShadcnDataTable>
+</CodeRunner>
+
+:::
+
 ## 列排序 (sort)
 
 ::: raw
@@ -175,7 +186,8 @@ title: 数据表格 (Data Table)
         ['columns', '表格列数据', '\[\]', '\[\]', '-'],
         ['data', '表格数据', '\[\]', '\[\]', '-'],
         ['size', '表格尺寸', 'enum', 'default', 'default | small | large'],
-        ['height', '表格高度，支持输入数字和字符串会自动计算，如果是数字的情况时，单位为 px', 'string', 'auto', '-'],
+        ['height', '表格高度，支持输入数字和字符串会自动计算，如果是数字的情况时，单位为 px', 'string | number', 'auto', '-'],
+        ['width', '表格宽度，支持输入数字和字符串会自动计算，如果是数字的情况时，单位为 px', 'string | number', '100%', '-'],
     ]">
 </ApiTable>
 
@@ -189,7 +201,7 @@ title: 数据表格 (Data Table)
         ['sort', '列的排序状态', 'enum', '-', 'asc | desc'],
         ['sortable', '列是否可排序', 'boolean', 'false', '-'],
         ['ellipsis', '列内容是否省略，超出时显示省略号', 'boolean', 'true', '-'],
-        ['width', '宽度，支持输入数字和字符串会自动计算，如果是数字的情况时，单位为 px', 'string', 'auto', '-'],
+        ['width', '宽度，支持输入数字和字符串会自动计算，如果是数字的情况时，单位为 px', 'string | number', 'auto', '-'],
         ['tooltip', '列内容是否显示提示', 'boolean', 'false', '-'],
         ['align', '对齐方式，可选值为', 'enum', 'left', 'left | right | center'],
         ['resizable', '列是否可调整宽度', 'boolean', 'false', '-'],
diff --git a/src/App.vue b/src/App.vue
index ce2f9989..b37f08e0 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -3,6 +3,7 @@
     <ShadcnDataTable :columns="columns"
                      :data="data"
                      size="small"
+                     width="300"
                      height="300"
                      @on-cell-click="handleCellClick"
                      @on-resizable="handleResizable">
diff --git a/src/ui/data-table/ShadcnDataTable.vue b/src/ui/data-table/ShadcnDataTable.vue
index 4669521b..37372dab 100644
--- a/src/ui/data-table/ShadcnDataTable.vue
+++ b/src/ui/data-table/ShadcnDataTable.vue
@@ -1,11 +1,11 @@
 <template>
   <div class="overflow-auto">
-    <div class="relative w-full" style="overflow-x: auto">
-      <div class="inline-block min-w-full bg-white" :style="{ height: calcSize(height) }">
+    <div class="relative w-full" style="overflow-x: auto" :style="{ width: calcSize(width) }">
+      <div class="inline-block bg-white" :style="{ height: calcSize(height) }">
         <TableHeader :columns="columns"
                      :size="size"
                      @on-sort="handleSortChange"
-                     @on-resizable="(column, width) => emits('on-resizable', column, width)">
+                     @on-resizable="(column, _width) => emits('on-resizable', column, _width)">
         </TableHeader>
 
         <TableBody :columns="columns"
@@ -28,7 +28,8 @@ import { calcSize } from '@/utils/common.ts'
 
 const props = withDefaults(defineProps<DataTableProps>(), {
   size: 'default',
-  height: 'auto'
+  height: 'auto',
+  width: '100%'
 })
 
 const emits = defineEmits<DataTableEmits>()
diff --git a/src/ui/data-table/types.ts b/src/ui/data-table/types.ts
index 49e3b03c..c0739ce5 100644
--- a/src/ui/data-table/types.ts
+++ b/src/ui/data-table/types.ts
@@ -21,6 +21,7 @@ export interface DataTableProps
     data: Record<string, any>[]
     size?: Size
     height?: number | string
+    width?: number | string
 }
 
 export type DataTableEmits = {

From 60e964b93052d5daaf2ac07fcc29149c0e972210 Mon Sep 17 00:00:00 2001
From: qianmoQ <shicheng@devlive.org>
Date: Tue, 14 Jan 2025 11:39:49 +0800
Subject: [PATCH 12/27] =?UTF-8?q?=E7=BB=84=E4=BB=B6(=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E8=A1=A8=E6=A0=BC):=20=E6=94=AF=E6=8C=81=E5=88=86=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/components/data/data-table.md            | 31 +++++++
 src/App.vue                                   | 21 ++++-
 src/locales/en-US.ts                          |  5 ++
 src/locales/zh-CN.ts                          |  5 ++
 src/ui/data-table/ShadcnDataTable.vue         | 48 ++++++++--
 .../data-table/components/TablePagination.vue | 90 +++++++++++++++++++
 src/ui/data-table/hooks/usePagination.ts      | 49 ++++++++++
 src/ui/data-table/types.ts                    | 15 ++++
 8 files changed, 253 insertions(+), 11 deletions(-)
 create mode 100644 src/ui/data-table/components/TablePagination.vue
 create mode 100644 src/ui/data-table/hooks/usePagination.ts

diff --git a/docs/components/data/data-table.md b/docs/components/data/data-table.md
index 3f6cbe4a..34d5f03c 100644
--- a/docs/components/data/data-table.md
+++ b/docs/components/data/data-table.md
@@ -112,6 +112,17 @@ title: 数据表格 (Data Table)
 
 :::
 
+## 分页 (pagination)
+
+::: raw
+
+<CodeRunner title="分页 (pagination)" codeKey="data-table-pagination">
+    <ShadcnDataTable :columns="columns" :data="longData" height="300" :pagination="{ size: 5, options: [5, 10, 20, 50, 100] }">
+    </ShadcnDataTable>
+</CodeRunner>
+
+:::
+
 ## 列排序 (sort)
 
 ::: raw
@@ -188,6 +199,7 @@ title: 数据表格 (Data Table)
         ['size', '表格尺寸', 'enum', 'default', 'default | small | large'],
         ['height', '表格高度，支持输入数字和字符串会自动计算，如果是数字的情况时，单位为 px', 'string | number', 'auto', '-'],
         ['width', '表格宽度，支持输入数字和字符串会自动计算，如果是数字的情况时，单位为 px', 'string | number', '100%', '-'],
+        ['pagination', '是否显示分页', 'object', '-', '-'],
     ]">
 </ApiTable>
 
@@ -208,6 +220,17 @@ title: 数据表格 (Data Table)
     ]">
 </ApiTable>
 
+<br />
+
+<ApiTable title="数据表格分页 (Data Table Pagination) 属性"
+    :headers="['属性', '描述', '类型', '默认值', '支持列表']"
+    :columns="[
+        ['page', '当前页码', 'number', '1', '-'],
+        ['size', '分页尺寸', 'number', '100', '-'],
+        ['options', '分页选项', 'number\[\]', '\[10, 20, 50, 100\]', '-'],
+    ]">
+</ApiTable>
+
 ## 数据表格 (Data Table) 事件
 
 <ApiTable title="数据表格 (Data Table) 事件"
@@ -316,6 +339,14 @@ const data = ref([
   }
 ])
 
+const longData = ref([])
+for (let i = 0; i < 1000; i++) {
+  const randomIndex = Math.floor(Math.random() * data.value.length)
+  const item = { ...data.value[randomIndex] }
+  item.index = data.value.length + 1
+  longData.value.push(item)
+}
+
 const handleChange = () => {
   console.log('表格数据发生变化')
 }
diff --git a/src/App.vue b/src/App.vue
index b37f08e0..760f838e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -3,27 +3,34 @@
     <ShadcnDataTable :columns="columns"
                      :data="data"
                      size="small"
-                     width="300"
                      height="300"
+                     :pagination="{ size: 7, options: [5, 10, 20, 50, 100] }"
                      @on-cell-click="handleCellClick"
-                     @on-resizable="handleResizable">
+                     @on-resizable="handleResizable"
+                     @on-page-change="console.log('页码改变' + $event)"
+                     @on-size-change="console.log('每页条数改变' + $event)">
     </ShadcnDataTable>
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue'
+import { setLocale } from '@/utils/locale.ts'
+
+setLocale('zh-CN')
 
 const columns = ref([
+  { key: 'index', label: '#', sortable: true, width: 50, align: 'center' },
   { key: 'title', label: '标题' },
   { key: 'author', label: '作者', sortable: true, resizable: true },
-  { key: 'description', label: '描述', width: 500, tooltip: true, resizable: true },
+  { key: 'description', label: '描述', width: 100, tooltip: true, resizable: true },
   { key: 'category', label: '分类', sortable: true, align: 'center' },
   { key: 'date', label: '发布日期', sortable: true }
 ])
 
 const data = ref([
   {
+    index: 1,
     title: '深入理解 Vue.js 响应式系统的原理与实现',
     author: '张文豪',
     description: 'Vue.js 的响应式系统是其最核心的特性之一，本文将深入探讨其实现原理。从最基本的 Object.defineProperty 到 Proxy 的使用，从依赖收集到派发更新，从计算属性到监听器，我们会逐步分析响应式系统的每个环节。同时也会讨论 Vue 3 中新的响应式系统的改进和优化，以及如何在实际开发中更好地利用响应式特性。',
@@ -31,6 +38,7 @@ const data = ref([
     date: '2024-01-15'
   },
   {
+    index: 2,
     title: 'TypeScript 高级特性与实践指南',
     author: '李明',
     description: 'TypeScript 作为 JavaScript 的超集，为我们提供了强大的类型系统和面向对象编程的能力。本文将详细介绍 TypeScript 中的高级类型、泛型、装饰器等特性，并结合实际项目经验，探讨如何在大型项目中更好地应用这些特性。我们还会分享一些在实际开发中遇到的类型设计难题及其解决方案，帮助开发者更好地理解和使用 TypeScript。',
@@ -38,6 +46,7 @@ const data = ref([
     date: '2024-01-20'
   },
   {
+    index: 3,
     title: '现代前端工程化实践：从搭建到部署',
     author: '王建国',
     description: '随着前端项目的复杂度不断提升，工程化已经成为必不可少的环节。本文将从项目初始化开始，详细讲解现代前端工程化的各个方面，包括构建工具的选择与配置、代码规范的制定与执行、测试框架的搭建、CI/CD 流程的设计等。通过实际案例，展示如何搭建一个完整的前端工程化体系，提高开发效率和代码质量。',
@@ -45,6 +54,7 @@ const data = ref([
     date: '2024-01-25'
   },
   {
+    index: 4,
     title: '微前端架构实践与性能优化',
     author: '赵云',
     description: '微前端作为一种新兴的架构模式，能够帮助我们更好地管理大型前端应用。本文将分享微前端的实践经验，包括框架选型、应用拆分策略、路由管理、通信机制等关键问题的解决方案。同时，我们还会深入讨论微前端架构下的性能优化策略，包括资源加载优化、预加载策略、缓存管理等，帮助开发者构建高性能的微前端应用。',
@@ -52,6 +62,7 @@ const data = ref([
     date: '2024-01-30'
   },
   {
+    index: 5,
     title: 'React 性能优化最佳实践',
     author: '陈思',
     description: '在 React 应用开发中，性能优化是一个永恒的主题。本文将深入探讨 React 应用的性能优化技巧，从组件渲染优化到状态管理，从代码分割到懒加载，从服务端渲染到缓存策略，我们会通过具体的案例来展示各种优化手段的效果和实现方法。同时也会介绍一些性能检测和分析工具，帮助开发者更好地发现和解决性能问题。',
@@ -62,7 +73,9 @@ const data = ref([
 
 for (let i = 0; i < 1000; i++) {
   const randomIndex = Math.floor(Math.random() * data.value.length)
-  data.value.push(data.value[randomIndex])
+  const item = { ...data.value[randomIndex] }
+  item.index = data.value.length + 1
+  data.value.push(item)
 }
 
 const handleCellClick = (playload: { rowIndex: number; col: string; row: any }) => {
diff --git a/src/locales/en-US.ts b/src/locales/en-US.ts
index 367dbab9..067f065b 100644
--- a/src/locales/en-US.ts
+++ b/src/locales/en-US.ts
@@ -318,5 +318,10 @@ export default {
             copied: 'Copied!',
             failed: 'Failed to copy!'
         }
+    },
+    dataTable: {
+        text: {
+            pageSize: 'Page size',
+        }
     }
 }
\ No newline at end of file
diff --git a/src/locales/zh-CN.ts b/src/locales/zh-CN.ts
index 3feac480..3dbeb18e 100644
--- a/src/locales/zh-CN.ts
+++ b/src/locales/zh-CN.ts
@@ -318,5 +318,10 @@ export default {
             copied: '复制成功',
             failed: '复制失败'
         }
+    },
+    dataTable: {
+        text: {
+            pageSize: '每页显示',
+        }
     }
 }
\ No newline at end of file
diff --git a/src/ui/data-table/ShadcnDataTable.vue b/src/ui/data-table/ShadcnDataTable.vue
index 37372dab..8de0bd65 100644
--- a/src/ui/data-table/ShadcnDataTable.vue
+++ b/src/ui/data-table/ShadcnDataTable.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="overflow-auto">
-    <div class="relative w-full" style="overflow-x: auto" :style="{ width: calcSize(width) }">
-      <div class="inline-block bg-white" :style="{ height: calcSize(height) }">
+  <div class="overflow-auto rounded-sm border">
+    <div :style="{ width: calcSize(width), height: calcSize(height) }" class="relative w-full" style="overflow-x: auto">
+      <div class="inline-block bg-white">
         <TableHeader :columns="columns"
                      :size="size"
                      @on-sort="handleSortChange"
@@ -9,22 +9,34 @@
         </TableHeader>
 
         <TableBody :columns="columns"
-                   :data="sortedData"
+                   :data="displayData"
                    :size="size"
                    @on-cell-click="emits('on-cell-click', $event)">
         </TableBody>
       </div>
     </div>
+
+    <TablePagination v-if="pagination"
+                     :page="currentPage"
+                     :size="pageSize"
+                     :total="total"
+                     :options="pagination.options"
+                     :total-pages="totalPages"
+                     @on-page-change="setPage"
+                     @on-size-change="setSize">
+    </TablePagination>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, watch } from 'vue'
 import TableHeader from './components/TableHeader.vue'
 import TableBody from './components/TableBody.vue'
+import TablePagination from './components/TablePagination.vue'
 import type { ColumnProps, DataTableEmits, DataTableProps } from './types'
 import { useSort } from './hooks/useSort'
-import { calcSize } from '@/utils/common.ts'
+import { calcSize } from '@/utils/common'
+import { usePagination } from './hooks/usePagination'
 
 const props = withDefaults(defineProps<DataTableProps>(), {
   size: 'default',
@@ -41,7 +53,7 @@ const handleSortChange = (column: ColumnProps, event: MouseEvent) => {
   emits('on-sort', getSortedColumns())
 }
 
-const sortedData = computed(() => {
+const dataSource = computed(() => {
   const sortColumns = getSortedColumns()
   if (sortColumns.length === 0) {
     return props.data
@@ -65,4 +77,26 @@ const sortedData = computed(() => {
     return 0
   })
 })
+
+const {
+  currentPage,
+  pageSize,
+  total,
+  paginatedData,
+  totalPages,
+  setSize,
+  setPage
+} = usePagination(dataSource, props.pagination || {})
+
+watch(currentPage, (page) => {
+  emits('on-page-change', page)
+})
+
+watch(pageSize, (size) => {
+  emits('on-size-change', size)
+})
+
+const displayData = computed(() => {
+  return props.pagination ? paginatedData.value : dataSource.value
+})
 </script>
\ No newline at end of file
diff --git a/src/ui/data-table/components/TablePagination.vue b/src/ui/data-table/components/TablePagination.vue
new file mode 100644
index 00000000..9dee6c5e
--- /dev/null
+++ b/src/ui/data-table/components/TablePagination.vue
@@ -0,0 +1,90 @@
+<template>
+  <div class="flex items-center justify-end space-x-8 px-4 py-1 bg-white border-t">
+    <div class="flex items-center">
+      <span class="text-sm text-gray-700 space-x-2">
+        <span>{{ t('dataTable.text.pageSize') }}</span>
+        <select v-model="localPageSize"
+                class="mx-1 border rounded-sm"
+                @change="handleSizeChange">
+          <option v-for="size in pageSizes" :key="size" :value="size">
+            {{ size }}
+          </option>
+        </select>
+      </span>
+    </div>
+
+    <div class="flex items-center space-x-4 justify-center">
+      <ShadcnIcon icon="ChevronsLeft"
+                  class="text-sm"
+                  :class="{
+                    'opacity-30 cursor-not-allowed': page === 1,
+                    'cursor-pointer': page > 1
+                  }"
+                  @click="setCurrentPage(1)">
+      </ShadcnIcon>
+
+      <ShadcnIcon icon="ChevronLeft"
+                  class="text-sm"
+                  :class="{
+                    'opacity-30 cursor-not-allowed': page === 1,
+                    'cursor-pointer': page > 1
+                  }"
+                  @click="setCurrentPage(page - 1)">
+      </ShadcnIcon>
+
+      <span class="text-sm text-gray-700 flex items-center select-none">
+        {{ page }} / {{ totalPages }}
+      </span>
+
+      <ShadcnIcon icon="ChevronRight"
+                  class="text-sm"
+                  :class="{
+                    'opacity-30 cursor-not-allowed': page === totalPages,
+                    'cursor-pointer': page < totalPages
+                  }"
+                  @click="setCurrentPage(page + 1)">
+      </ShadcnIcon>
+
+      <ShadcnIcon icon="ChevronsRight"
+                  class="text-sm"
+                  :class="{
+                    'opacity-30 cursor-not-allowed': page === totalPages,
+                    'cursor-pointer': page < totalPages
+                  }"
+                  @click="setCurrentPage(totalPages)">
+      </ShadcnIcon>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch } from 'vue'
+import { t } from '@/utils/locale'
+import { DataTablePaginationEmits } from '../types.ts'
+import ShadcnIcon from '@/ui/icon'
+
+const props = defineProps<{
+  page: number
+  size: number
+  total: number
+  totalPages: number
+  options?: [10, 20, 50, 100]
+}>()
+
+const emit = defineEmits<DataTablePaginationEmits>()
+
+const pageSizes = ref(props.options || [10, 20, 50, 100])
+const localPageSize = ref(props.size)
+
+const setCurrentPage = (page: number) => {
+  emit('on-page-change', page)
+}
+
+const handleSizeChange = () => {
+  emit('on-size-change', localPageSize.value)
+}
+
+watch(() => props.size, (newSize) => {
+  localPageSize.value = newSize
+})
+</script>
\ No newline at end of file
diff --git a/src/ui/data-table/hooks/usePagination.ts b/src/ui/data-table/hooks/usePagination.ts
new file mode 100644
index 00000000..8dd78021
--- /dev/null
+++ b/src/ui/data-table/hooks/usePagination.ts
@@ -0,0 +1,49 @@
+import { PaginationProps } from '../types'
+import { computed, ref, Ref, watch } from 'vue'
+
+export const usePagination = (dataSource: Ref<any[]>, options: PaginationProps = {}) => {
+    const currentPage = ref(options.page || 1)
+    const pageSize = ref(options.size || 100)
+    const total = computed(() => dataSource.value.length)
+
+    const paginatedData = computed(() => {
+        const start = (currentPage.value - 1) * pageSize.value
+        const end = start + pageSize.value
+        return dataSource.value.slice(start, end)
+    })
+
+    const totalPages = computed(() => Math.ceil(total.value / pageSize.value))
+
+    watch(dataSource, () => {
+        currentPage.value = 1
+    })
+
+    const setPage = (page: number) => {
+        if (page < 1 || page > totalPages.value) {
+            return
+        }
+        currentPage.value = page
+    }
+
+    const setSize = (size: number) => {
+        pageSize.value = size
+        currentPage.value = 1
+    }
+
+    // 确保当前页面不超过总页数
+    watch(totalPages, (newTotalPages) => {
+        if (currentPage.value > newTotalPages) {
+            currentPage.value = Math.max(1, newTotalPages)
+        }
+    })
+
+    return {
+        currentPage,
+        pageSize,
+        total,
+        paginatedData,
+        totalPages,
+        setPage,
+        setSize
+    }
+}
\ No newline at end of file
diff --git a/src/ui/data-table/types.ts b/src/ui/data-table/types.ts
index c0739ce5..7a8f7c06 100644
--- a/src/ui/data-table/types.ts
+++ b/src/ui/data-table/types.ts
@@ -2,6 +2,13 @@ import { Size } from '@/ui/data-table/size.ts'
 
 export type SortOrder = 'asc' | 'desc' | null
 
+export interface PaginationProps
+{
+    size?: number
+    page?: number
+    options?: any
+}
+
 export interface ColumnProps
 {
     key: string
@@ -22,12 +29,15 @@ export interface DataTableProps
     size?: Size
     height?: number | string
     width?: number | string
+    pagination?: PaginationProps
 }
 
 export type DataTableEmits = {
     (e: 'on-sort', column: ColumnProps[]): void
     (e: 'on-resizable', column: ColumnProps, width: number): void
     (e: 'on-cell-click', payload: { rowIndex: number; col: string; row: any }): void
+    (e: 'on-page-change', page: number): void
+    (e: 'on-size-change', size: number): void
 }
 
 export type DataTableHeaderEmits = {
@@ -37,4 +47,9 @@ export type DataTableHeaderEmits = {
 
 export type DataTableBodyEmits = {
     (e: 'on-cell-click', payload: { rowIndex: number; col: string; row: any }): void
+}
+
+export  type DataTablePaginationEmits = {
+    (e: 'on-page-change', page: number): void
+    (e: 'on-size-change', size: number): void
 }
\ No newline at end of file

From fc3eaad415aca0de0aca87ecaa463b65e3189eed Mon Sep 17 00:00:00 2001
From: qianmoQ <shicheng@devlive.org>
Date: Tue, 14 Jan 2025 11:53:21 +0800
Subject: [PATCH 13/27] =?UTF-8?q?=E7=BB=84=E4=BB=B6(=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E8=A1=A8=E6=A0=BC):=20=E6=94=AF=E6=8C=81=E5=BC=82=E6=AD=A5?=
 =?UTF-8?q?=E5=88=86=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                                  | 2 +-
 src/ui/data-table/components/TableHeader.vue | 2 +-
 src/ui/data-table/hooks/usePagination.ts     | 2 +-
 src/ui/data-table/types.ts                   | 1 +
 4 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 760f838e..b3ca9215 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,7 +4,7 @@
                      :data="data"
                      size="small"
                      height="300"
-                     :pagination="{ size: 7, options: [5, 10, 20, 50, 100] }"
+                     :pagination="{ size: 20, options: [5, 10, 20, 50, 100] }"
                      @on-cell-click="handleCellClick"
                      @on-resizable="handleResizable"
                      @on-page-change="console.log('页码改变' + $event)"
diff --git a/src/ui/data-table/components/TableHeader.vue b/src/ui/data-table/components/TableHeader.vue
index c3d6322e..39a69ed4 100644
--- a/src/ui/data-table/components/TableHeader.vue
+++ b/src/ui/data-table/components/TableHeader.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex border-b bg-gray-100 relative w-full">
+  <div class="flex border-b bg-gray-100 relative w-full sticky top-0 z-10">
     <div v-for="col in columns"
          :key="col.key"
          :style="[
diff --git a/src/ui/data-table/hooks/usePagination.ts b/src/ui/data-table/hooks/usePagination.ts
index 8dd78021..445b5956 100644
--- a/src/ui/data-table/hooks/usePagination.ts
+++ b/src/ui/data-table/hooks/usePagination.ts
@@ -4,7 +4,7 @@ import { computed, ref, Ref, watch } from 'vue'
 export const usePagination = (dataSource: Ref<any[]>, options: PaginationProps = {}) => {
     const currentPage = ref(options.page || 1)
     const pageSize = ref(options.size || 100)
-    const total = computed(() => dataSource.value.length)
+    const total = computed(() => options.total || dataSource.value.length || 0)
 
     const paginatedData = computed(() => {
         const start = (currentPage.value - 1) * pageSize.value
diff --git a/src/ui/data-table/types.ts b/src/ui/data-table/types.ts
index 7a8f7c06..c48714c6 100644
--- a/src/ui/data-table/types.ts
+++ b/src/ui/data-table/types.ts
@@ -6,6 +6,7 @@ export interface PaginationProps
 {
     size?: number
     page?: number
+    total?: number
     options?: any
 }
 

From 9a66120ffd6e716b83381aeff68aace50164e160 Mon Sep 17 00:00:00 2001
From: qianmoQ <shicheng@devlive.org>
Date: Tue, 14 Jan 2025 12:01:50 +0800
Subject: [PATCH 14/27] =?UTF-8?q?=E7=BB=84=E4=BB=B6(=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E8=A1=A8=E6=A0=BC):=20=E4=BF=AE=E5=A4=8D=E7=82=B9=E5=87=BB?=
 =?UTF-8?q?=E5=A4=96=E9=83=A8=E5=8F=96=E6=B6=88=E9=80=89=E6=8B=A9=E5=8D=95?=
 =?UTF-8?q?=E5=85=83=E6=A0=BC=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/ui/data-table/components/TableBody.vue | 33 ++++++++++++++++++++--
 src/ui/data-table/types.ts                 |  2 +-
 2 files changed, 31 insertions(+), 4 deletions(-)

diff --git a/src/ui/data-table/components/TableBody.vue b/src/ui/data-table/components/TableBody.vue
index a0ebd990..9bc66421 100644
--- a/src/ui/data-table/components/TableBody.vue
+++ b/src/ui/data-table/components/TableBody.vue
@@ -1,5 +1,7 @@
 <template>
-  <div class="flex flex-col w-full">
+  <div class="flex flex-col w-full"
+       ref="tableRef"
+       @click.stop>
     <div v-for="(row, rowIndex) in data"
          :key="rowIndex"
          :class="[
@@ -20,7 +22,7 @@
            ]"
            @mousemove.stop.prevent="(col.ellipsis !== false && col.tooltip) && showTooltip($event, row[col.key])"
            @mouseleave.stop.prevent="hideTooltip"
-           @click="selectCell(rowIndex, col.key, row)">
+           @click.stop="selectCell(rowIndex, col.key, row)">
         {{ row[col.key] }}
       </div>
     </div>
@@ -31,7 +33,7 @@
 import { DataTableBodyEmits, DataTableProps } from '../types'
 import { BaseSize } from '@/ui/common/size.ts'
 import { TablePaddingSize } from '../size'
-import { ref } from 'vue'
+import { onMounted, onUnmounted, ref } from 'vue'
 import { useTooltip } from '@/ui/data-table/hooks/useTooltip.ts'
 import { calcSize } from '@/utils/common.ts'
 
@@ -41,6 +43,8 @@ withDefaults(defineProps<DataTableProps>(), {
   size: 'default'
 })
 
+const tableRef = ref<HTMLElement | null>(null)
+
 const selectedCell = ref<{ rowIndex: number | null; row: any; col: string | null }>({
   rowIndex: null,
   row: null,
@@ -52,5 +56,28 @@ const selectCell = (rowIndex: number, col: string, row: any) => {
   emits('on-cell-click', { rowIndex, row, col })
 }
 
+const clearSelectedCell = () => {
+  selectedCell.value = {
+    rowIndex: null,
+    row: null,
+    col: null
+  }
+  emits('on-cell-click', undefined)
+}
+
+const handleClickOutside = (event: MouseEvent) => {
+  if (tableRef.value && !tableRef.value.contains(event.target as Node)) {
+    clearSelectedCell()
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('click', handleClickOutside, true)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('click', handleClickOutside, true)
+})
+
 const { showTooltip, hideTooltip } = useTooltip()
 </script>
\ No newline at end of file
diff --git a/src/ui/data-table/types.ts b/src/ui/data-table/types.ts
index c48714c6..049a066e 100644
--- a/src/ui/data-table/types.ts
+++ b/src/ui/data-table/types.ts
@@ -47,7 +47,7 @@ export type DataTableHeaderEmits = {
 }
 
 export type DataTableBodyEmits = {
-    (e: 'on-cell-click', payload: { rowIndex: number; col: string; row: any }): void
+    (e: 'on-cell-click', payload: { rowIndex: number; col: string; row: any } | undefined): void
 }
 
 export  type DataTablePaginationEmits = {

From d6351d5d699f6e22028587de967ab47d45afe37b Mon Sep 17 00:00:00 2001
From: qianmoQ <shicheng@devlive.org>
Date: Tue, 14 Jan 2025 13:20:12 +0800
Subject: [PATCH 15/27] =?UTF-8?q?=E7=BB=84=E4=BB=B6(=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E8=A1=A8=E6=A0=BC):=20=E6=94=AF=E6=8C=81=E8=A1=8C=E9=80=89?=
 =?UTF-8?q?=E6=8B=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/components/data/data-table.md           |  30 ++++++
 src/App.vue                                  |  20 +++-
 src/ui/data-table/ShadcnDataTable.vue        |   9 +-
 src/ui/data-table/components/TableBody.vue   |  82 ++++++++++-----
 src/ui/data-table/components/TableHeader.vue |  43 ++++++--
 src/ui/data-table/hooks/useRowSelection.ts   | 104 +++++++++++++++++++
 src/ui/data-table/types.ts                   |  10 +-
 7 files changed, 260 insertions(+), 38 deletions(-)
 create mode 100644 src/ui/data-table/hooks/useRowSelection.ts

diff --git a/docs/components/data/data-table.md b/docs/components/data/data-table.md
index 34d5f03c..cdf0f49c 100644
--- a/docs/components/data/data-table.md
+++ b/docs/components/data/data-table.md
@@ -123,6 +123,35 @@ title: 数据表格 (Data Table)
 
 :::
 
+## 行选择 (selection)
+
+::: raw
+
+<CodeRunner title="行选择 (selection)" codeKey="data-table-selection">
+    <ShadcnDataTable :columns="columns"
+                     :data="data"
+                     size="small"
+                     height="300"
+                     :pagination="{ size: 20, options: [5, 10, 20, 50, 100] }"
+                     row-selection="singleRow"
+                     @on-page-change="console.log('页码改变' + $event)"
+                     @on-size-change="console.log('每页条数改变' + $event)"
+                     @on-row-select="console.log('选中的数据条数 ' + $event?.selectedRows.length)">
+    </ShadcnDataTable>
+    <ShadcnDataTable :columns="columns"
+                     :data="data"
+                     size="small"
+                     height="300"
+                     :pagination="{ size: 20, options: [5, 10, 20, 50, 100] }"
+                     row-selection="multipleRow"
+                     @on-page-change="console.log('页码改变' + $event)"
+                     @on-size-change="console.log('每页条数改变' + $event)"
+                     @on-row-select="console.log('选中的数据条数 ' + $event?.selectedRows.length)">
+    </ShadcnDataTable>
+</CodeRunner>
+
+:::
+
 ## 列排序 (sort)
 
 ::: raw
@@ -200,6 +229,7 @@ title: 数据表格 (Data Table)
         ['height', '表格高度，支持输入数字和字符串会自动计算，如果是数字的情况时，单位为 px', 'string | number', 'auto', '-'],
         ['width', '表格宽度，支持输入数字和字符串会自动计算，如果是数字的情况时，单位为 px', 'string | number', '100%', '-'],
         ['pagination', '是否显示分页', 'object', '-', '-'],
+        ['rowSelection', '行选择方式', 'enum', '-', 'singleRow | multipleRow'],
     ]">
 </ApiTable>
 
diff --git a/src/App.vue b/src/App.vue
index b3ca9215..d3176c79 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -5,10 +5,24 @@
                      size="small"
                      height="300"
                      :pagination="{ size: 20, options: [5, 10, 20, 50, 100] }"
+                     row-selection="singleRow"
                      @on-cell-click="handleCellClick"
                      @on-resizable="handleResizable"
                      @on-page-change="console.log('页码改变' + $event)"
-                     @on-size-change="console.log('每页条数改变' + $event)">
+                     @on-size-change="console.log('每页条数改变' + $event)"
+                     @on-row-select="console.log('选中的数据条数 ' + $event?.selectedRows.length)">
+    </ShadcnDataTable>
+    <ShadcnDataTable :columns="columns"
+                     :data="data"
+                     size="small"
+                     height="300"
+                     :pagination="{ size: 20, options: [5, 10, 20, 50, 100] }"
+                     row-selection="multipleRow"
+                     @on-cell-click="handleCellClick"
+                     @on-resizable="handleResizable"
+                     @on-page-change="console.log('页码改变' + $event)"
+                     @on-size-change="console.log('每页条数改变' + $event)"
+                     @on-row-select="console.log('选中的数据条数 ' + $event?.selectedRows.length)">
     </ShadcnDataTable>
   </div>
 </template>
@@ -79,7 +93,9 @@ for (let i = 0; i < 1000; i++) {
 }
 
 const handleCellClick = (playload: { rowIndex: number; col: string; row: any }) => {
-  console.log(`点击了第 ${ playload.rowIndex + 1 } 行，${ playload.col } 列`)
+  if (playload) {
+    console.log(`点击了第 ${ playload.rowIndex + 1 } 行，${ playload.col } 列`)
+  }
 }
 
 const handleResizable = (column: any, width: number) => {
diff --git a/src/ui/data-table/ShadcnDataTable.vue b/src/ui/data-table/ShadcnDataTable.vue
index 8de0bd65..75487b01 100644
--- a/src/ui/data-table/ShadcnDataTable.vue
+++ b/src/ui/data-table/ShadcnDataTable.vue
@@ -4,14 +4,19 @@
       <div class="inline-block bg-white">
         <TableHeader :columns="columns"
                      :size="size"
+                     :data="displayData"
+                     :row-selection="rowSelection"
                      @on-sort="handleSortChange"
-                     @on-resizable="(column, _width) => emits('on-resizable', column, _width)">
+                     @on-resizable="(column, _width) => emits('on-resizable', column, _width)"
+                     @on-row-select="(payload) => emits('on-row-select', payload as any)">
         </TableHeader>
 
         <TableBody :columns="columns"
                    :data="displayData"
                    :size="size"
-                   @on-cell-click="emits('on-cell-click', $event)">
+                   :row-selection="rowSelection"
+                   @on-cell-click="(payload) => emits('on-cell-click', payload as any)"
+                   @on-row-select="(payload) => emits('on-row-select', payload as any)">
         </TableBody>
       </div>
     </div>
diff --git a/src/ui/data-table/components/TableBody.vue b/src/ui/data-table/components/TableBody.vue
index 9bc66421..0794ea2a 100644
--- a/src/ui/data-table/components/TableBody.vue
+++ b/src/ui/data-table/components/TableBody.vue
@@ -1,13 +1,38 @@
 <template>
-  <div class="flex flex-col w-full"
-       ref="tableRef"
-       @click.stop>
+  <div class="flex flex-col w-full" ref="tableRef" @click.stop>
     <div v-for="(row, rowIndex) in data"
          :key="rowIndex"
          :class="[
-           'flex border-b hover:bg-gray-50 items-center h-full',
-           BaseSize[size]
-         ]">
+           'flex border-b items-center h-full',
+           BaseSize[size],
+           isRowSelected(rowIndex) && 'bg-blue-50',
+           !isRowSelected(rowIndex) && 'hover:bg-gray-50'
+         ]"
+         @click="handleRowClick(rowIndex, row)">
+      <!-- 选择列 -->
+      <div v-if="rowSelection === 'multipleRow'"
+           :style="{ width: '48px', flexShrink: 0 }"
+           :class="[TablePaddingSize[size]]"
+           class="flex items-center justify-center"
+           @click.stop>
+        <input type="checkbox"
+               :checked="isRowSelected(rowIndex)"
+               @change="toggleRowSelection(rowIndex)"
+               class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"/>
+      </div>
+      <div v-else-if="rowSelection === 'singleRow'"
+           :style="{ width: '48px', flexShrink: 0 }"
+           :class="[TablePaddingSize[size]]"
+           class="flex items-center justify-center"
+           @click.stop>
+        <input type="radio"
+               :checked="isRowSelected(rowIndex)"
+               @change="toggleRowSelection(rowIndex)"
+               :name="'row-select'"
+               class="w-4 h-4 border-gray-300 text-blue-600 focus:ring-blue-500"/>
+      </div>
+
+      <!-- 数据列 -->
       <div v-for="col in columns"
            :key="col.key"
            :style="{
@@ -18,7 +43,7 @@
              TablePaddingSize[size],
              `text-${col.align || 'left'}`,
              col.ellipsis !== false ? 'relative truncate whitespace-nowrap overflow-hidden' : 'break-words whitespace-normal',
-             (selectedCell.rowIndex === rowIndex && selectedCell.col === col.key) && 'border border-blue-400'
+             (selectedCell?.rowIndex === rowIndex && selectedCell?.col === col.key) && 'border border-blue-400'
            ]"
            @mousemove.stop.prevent="(col.ellipsis !== false && col.tooltip) && showTooltip($event, row[col.key])"
            @mouseleave.stop.prevent="hideTooltip"
@@ -30,26 +55,37 @@
 </template>
 
 <script setup lang="ts">
-import { DataTableBodyEmits, DataTableProps } from '../types'
-import { BaseSize } from '@/ui/common/size.ts'
+import { CellClickPayload, DataTableBodyEmits, DataTableProps } from '../types'
+import { BaseSize } from '@/ui/common/size'
 import { TablePaddingSize } from '../size'
 import { onMounted, onUnmounted, ref } from 'vue'
-import { useTooltip } from '@/ui/data-table/hooks/useTooltip.ts'
-import { calcSize } from '@/utils/common.ts'
+import { useTooltip } from '../hooks/useTooltip'
+import { calcSize } from '@/utils/common'
+import { useRowSelection } from '../hooks/useRowSelection'
 
-const emits = defineEmits<DataTableBodyEmits>()
-
-withDefaults(defineProps<DataTableProps>(), {
+const props = withDefaults(defineProps<DataTableProps>(), {
   size: 'default'
 })
 
+const emits = defineEmits<DataTableBodyEmits>()
+
+const {
+  isRowSelected,
+  toggleRowSelection
+} = useRowSelection(
+    props.rowSelection,
+    props.data,
+    emits
+)
+
 const tableRef = ref<HTMLElement | null>(null)
+const selectedCell = ref<CellClickPayload>(null)
 
-const selectedCell = ref<{ rowIndex: number | null; row: any; col: string | null }>({
-  rowIndex: null,
-  row: null,
-  col: null
-})
+const handleRowClick = (rowIndex: number, _row: any) => {
+  if (props.rowSelection) {
+    toggleRowSelection(rowIndex)
+  }
+}
 
 const selectCell = (rowIndex: number, col: string, row: any) => {
   selectedCell.value = { rowIndex, row, col }
@@ -57,12 +93,8 @@ const selectCell = (rowIndex: number, col: string, row: any) => {
 }
 
 const clearSelectedCell = () => {
-  selectedCell.value = {
-    rowIndex: null,
-    row: null,
-    col: null
-  }
-  emits('on-cell-click', undefined)
+  selectedCell.value = null
+  emits('on-cell-click', selectedCell.value)
 }
 
 const handleClickOutside = (event: MouseEvent) => {
diff --git a/src/ui/data-table/components/TableHeader.vue b/src/ui/data-table/components/TableHeader.vue
index 39a69ed4..c0beae80 100644
--- a/src/ui/data-table/components/TableHeader.vue
+++ b/src/ui/data-table/components/TableHeader.vue
@@ -1,5 +1,21 @@
 <template>
   <div class="flex border-b bg-gray-100 relative w-full sticky top-0 z-10">
+    <!-- 选择列 -->
+    <div v-if="rowSelection === 'multipleRow'"
+         :style="{ width: '48px', flexShrink: 0 }"
+         :class="[TablePaddingSize[size]]"
+         class="flex items-center justify-center">
+      <input type="checkbox"
+             :checked="isAllSelected"
+             :indeterminate="isIndeterminate"
+             @change="toggleAllRows"
+             class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"/>
+    </div>
+    <div v-else-if="rowSelection === 'singleRow'"
+         :style="{ width: '48px', flexShrink: 0 }">
+    </div>
+
+    <!-- 数据列 -->
     <div v-for="col in columns"
          :key="col.key"
          :style="[
@@ -11,7 +27,7 @@
            TablePaddingSize[size],
            col.sortable && 'cursor-pointer select-none'
          ]"
-         @click.stop="col.sortable && handleSort(col, $event)">
+         @click="col.sortable && handleSort(col, $event)">
       <div class="inline-flex items-center">
         <span>{{ col.label }}</span>
         <div v-if="col.sortable"
@@ -27,8 +43,6 @@
           </ShadcnIcon>
         </div>
       </div>
-
-      <!-- 拖拽手柄 -->
       <div v-if="col.resizable"
            data-resize-handle
            class="absolute top-0 right-0 h-full w-1 cursor-col-resize flex items-center justify-center group"
@@ -41,21 +55,34 @@
 </template>
 
 <script setup lang="ts">
-import { ColumnProps, DataTableHeaderEmits } from '../types'
-import { Size, TablePaddingSize } from '@/ui/data-table/size.ts'
+import { ColumnProps, DataTableHeaderEmits, RowSelectionMode } from '../types'
+import { Size, TablePaddingSize } from '../size'
 import ShadcnIcon from '@/ui/icon'
-import { calcSize } from '@/utils/common.ts'
+import { calcSize } from '@/utils/common'
 import { useResize } from '../hooks/useResize'
+import { useRowSelection } from '../hooks/useRowSelection'
 
-withDefaults(defineProps<{
-  columns: ColumnProps[],
+const props = withDefaults(defineProps<{
+  columns: ColumnProps[]
+  data: Record<string, any>[]
   size?: Size
+  rowSelection?: RowSelectionMode
 }>(), {
   size: 'default'
 })
 
 const emits = defineEmits<DataTableHeaderEmits>()
 
+const {
+  isAllSelected,
+  isIndeterminate,
+  toggleAllRows
+} = useRowSelection(
+    props.rowSelection,
+    props.data,
+    emits
+)
+
 const handleSort = (column: ColumnProps, event: MouseEvent) => {
   event.stopPropagation()
   emits('on-sort', column, event)
diff --git a/src/ui/data-table/hooks/useRowSelection.ts b/src/ui/data-table/hooks/useRowSelection.ts
new file mode 100644
index 00000000..c130f4ed
--- /dev/null
+++ b/src/ui/data-table/hooks/useRowSelection.ts
@@ -0,0 +1,104 @@
+import { computed, ref } from 'vue'
+import type { RowSelectionMode } from '../types'
+
+export function useRowSelection(
+    mode: RowSelectionMode = 'singleRow',
+    data: Record<string, any>[],
+    emits: any
+)
+{
+    const totalRows = data.length
+    const selectedRows = ref<number[]>([])
+
+    const toggleRowSelection = (rowIndex: number) => {
+        if (mode === 'singleRow') {
+            const newSelected = selectedRows.value[0] === rowIndex ? [] : [rowIndex]
+            selectedRows.value = newSelected
+
+            // 单选模式只提交当前选中的行
+            if (newSelected.length > 0) {
+                emits('on-row-select', {
+                    rowIndex,
+                    row: data[rowIndex],
+                    selected: true,
+                    selectedRows: [data[rowIndex]]  // 只包含当前选中的行数据
+                })
+            }
+            else {
+                emits('on-row-select', {
+                    rowIndex,
+                    row: null,
+                    selected: false,
+                    selectedRows: []  // 清空选择时返回空数组
+                })
+            }
+        }
+        else {
+            const index = selectedRows.value.indexOf(rowIndex)
+            const newSelected = [...selectedRows.value]
+
+            if (index > -1) {
+                newSelected.splice(index, 1)
+            }
+            else {
+                newSelected.push(rowIndex)
+            }
+
+            selectedRows.value = newSelected
+
+            // 多选模式提交所有选中的行数据
+            emits('on-row-select', {
+                rowIndex,
+                row: data[rowIndex],
+                selected: newSelected.includes(rowIndex),
+                selectedRows: newSelected.map(index => data[index])  // 包含所有选中行的数据
+            })
+        }
+    }
+
+    const isRowSelected = (rowIndex: number) => {
+        return selectedRows.value.includes(rowIndex)
+    }
+
+    const toggleAllRows = () => {
+        if (mode === 'multipleRow') {
+            const isAllSelectedCurrently = selectedRows.value.length === totalRows
+            selectedRows.value = isAllSelectedCurrently
+                ? []
+                : Array.from({ length: totalRows }, (_, i) => i)
+
+            emits('on-row-select', {
+                rowIndex: -1,
+                row: null,
+                selected: !isAllSelectedCurrently,
+                selectedRows: !isAllSelectedCurrently ? data : []
+            })
+        }
+    }
+
+    const isAllSelected = computed(() => {
+        return mode === 'multipleRow' &&
+            totalRows > 0 &&
+            selectedRows.value.length === totalRows
+    })
+
+    const isIndeterminate = computed(() => {
+        return mode === 'multipleRow' &&
+            selectedRows.value.length > 0 &&
+            selectedRows.value.length < totalRows
+    })
+
+    const clearSelection = () => {
+        selectedRows.value = []
+    }
+
+    return {
+        selectedRows: computed(() => selectedRows.value),
+        toggleRowSelection,
+        isRowSelected,
+        toggleAllRows,
+        isAllSelected,
+        isIndeterminate,
+        clearSelection
+    }
+}
\ No newline at end of file
diff --git a/src/ui/data-table/types.ts b/src/ui/data-table/types.ts
index 049a066e..877c5940 100644
--- a/src/ui/data-table/types.ts
+++ b/src/ui/data-table/types.ts
@@ -1,6 +1,10 @@
 import { Size } from '@/ui/data-table/size.ts'
 
 export type SortOrder = 'asc' | 'desc' | null
+export type RowSelectionMode = 'singleRow' | 'multipleRow'
+
+export type CellClickPayload = { rowIndex: number; col: string; row: any } | null
+export type RowSelectPayload = { rowIndex: number; row: any, selected: boolean, selectedRows: any[] } | null
 
 export interface PaginationProps
 {
@@ -31,6 +35,7 @@ export interface DataTableProps
     height?: number | string
     width?: number | string
     pagination?: PaginationProps
+    rowSelection?: RowSelectionMode
 }
 
 export type DataTableEmits = {
@@ -39,15 +44,18 @@ export type DataTableEmits = {
     (e: 'on-cell-click', payload: { rowIndex: number; col: string; row: any }): void
     (e: 'on-page-change', page: number): void
     (e: 'on-size-change', size: number): void
+    (e: 'on-row-select', payload: RowSelectPayload): void
 }
 
 export type DataTableHeaderEmits = {
     (e: 'on-sort', column: ColumnProps, event: MouseEvent): void
     (e: 'on-resizable', column: ColumnProps, width: number): void
+    (e: 'on-row-select', payload: RowSelectPayload): void
 }
 
 export type DataTableBodyEmits = {
-    (e: 'on-cell-click', payload: { rowIndex: number; col: string; row: any } | undefined): void
+    (e: 'on-cell-click', payload: CellClickPayload): void
+    (e: 'on-row-select', payload: RowSelectPayload): void
 }
 
 export  type DataTablePaginationEmits = {

From dabbc4d07eae3e9e4f3510cf414b8cfb5d662074 Mon Sep 17 00:00:00 2001
From: qianmoQ <shicheng@devlive.org>
Date: Tue, 14 Jan 2025 13:35:32 +0800
Subject: [PATCH 16/27] =?UTF-8?q?=E7=BB=84=E4=BB=B6(=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E8=A1=A8=E6=A0=BC):=20=E4=BF=AE=E5=A4=8D=E8=A1=8C=E5=A4=9A?=
 =?UTF-8?q?=E9=80=89=E7=8A=B6=E6=80=81=E5=90=8C=E6=AD=A5=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/ui/data-table/ShadcnDataTable.vue        |  9 +++++
 src/ui/data-table/components/TableBody.vue   | 35 +++++++++-----------
 src/ui/data-table/components/TableHeader.vue | 20 +++--------
 3 files changed, 30 insertions(+), 34 deletions(-)

diff --git a/src/ui/data-table/ShadcnDataTable.vue b/src/ui/data-table/ShadcnDataTable.vue
index 75487b01..d5720b17 100644
--- a/src/ui/data-table/ShadcnDataTable.vue
+++ b/src/ui/data-table/ShadcnDataTable.vue
@@ -6,6 +6,7 @@
                      :size="size"
                      :data="displayData"
                      :row-selection="rowSelection"
+                     :selection-state="selectionState"
                      @on-sort="handleSortChange"
                      @on-resizable="(column, _width) => emits('on-resizable', column, _width)"
                      @on-row-select="(payload) => emits('on-row-select', payload as any)">
@@ -15,6 +16,7 @@
                    :data="displayData"
                    :size="size"
                    :row-selection="rowSelection"
+                   :selection-state="selectionState"
                    @on-cell-click="(payload) => emits('on-cell-click', payload as any)"
                    @on-row-select="(payload) => emits('on-row-select', payload as any)">
         </TableBody>
@@ -42,6 +44,7 @@ import type { ColumnProps, DataTableEmits, DataTableProps } from './types'
 import { useSort } from './hooks/useSort'
 import { calcSize } from '@/utils/common'
 import { usePagination } from './hooks/usePagination'
+import { useRowSelection } from './hooks/useRowSelection'
 
 const props = withDefaults(defineProps<DataTableProps>(), {
   size: 'default',
@@ -104,4 +107,10 @@ watch(pageSize, (size) => {
 const displayData = computed(() => {
   return props.pagination ? paginatedData.value : dataSource.value
 })
+
+const selectionState = useRowSelection(
+    props.rowSelection,
+    displayData.value,
+    emits
+)
 </script>
\ No newline at end of file
diff --git a/src/ui/data-table/components/TableBody.vue b/src/ui/data-table/components/TableBody.vue
index 0794ea2a..fcc75ac9 100644
--- a/src/ui/data-table/components/TableBody.vue
+++ b/src/ui/data-table/components/TableBody.vue
@@ -5,8 +5,8 @@
          :class="[
            'flex border-b items-center h-full',
            BaseSize[size],
-           isRowSelected(rowIndex) && 'bg-blue-50',
-           !isRowSelected(rowIndex) && 'hover:bg-gray-50'
+           selectionState.isRowSelected(rowIndex) && 'bg-blue-50',
+           !selectionState.isRowSelected(rowIndex) && 'hover:bg-gray-50'
          ]"
          @click="handleRowClick(rowIndex, row)">
       <!-- 选择列 -->
@@ -16,8 +16,8 @@
            class="flex items-center justify-center"
            @click.stop>
         <input type="checkbox"
-               :checked="isRowSelected(rowIndex)"
-               @change="toggleRowSelection(rowIndex)"
+               :checked="selectionState.isRowSelected(rowIndex)"
+               @change="selectionState.toggleRowSelection(rowIndex)"
                class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"/>
       </div>
       <div v-else-if="rowSelection === 'singleRow'"
@@ -26,8 +26,8 @@
            class="flex items-center justify-center"
            @click.stop>
         <input type="radio"
-               :checked="isRowSelected(rowIndex)"
-               @change="toggleRowSelection(rowIndex)"
+               :checked="selectionState.isRowSelected(rowIndex)"
+               @change="selectionState.toggleRowSelection(rowIndex)"
                :name="'row-select'"
                class="w-4 h-4 border-gray-300 text-blue-600 focus:ring-blue-500"/>
       </div>
@@ -55,35 +55,32 @@
 </template>
 
 <script setup lang="ts">
-import { CellClickPayload, DataTableBodyEmits, DataTableProps } from '../types'
+import { CellClickPayload, ColumnProps, DataTableBodyEmits, RowSelectionMode } from '../types'
 import { BaseSize } from '@/ui/common/size'
-import { TablePaddingSize } from '../size'
+import { Size, TablePaddingSize } from '../size'
 import { onMounted, onUnmounted, ref } from 'vue'
 import { useTooltip } from '../hooks/useTooltip'
 import { calcSize } from '@/utils/common'
 import { useRowSelection } from '../hooks/useRowSelection'
 
-const props = withDefaults(defineProps<DataTableProps>(), {
+const props = withDefaults(defineProps<{
+  columns: ColumnProps[]
+  data: Record<string, any>[]
+  size?: Size
+  rowSelection?: RowSelectionMode
+  selectionState: ReturnType<typeof useRowSelection>
+}>(), {
   size: 'default'
 })
 
 const emits = defineEmits<DataTableBodyEmits>()
 
-const {
-  isRowSelected,
-  toggleRowSelection
-} = useRowSelection(
-    props.rowSelection,
-    props.data,
-    emits
-)
-
 const tableRef = ref<HTMLElement | null>(null)
 const selectedCell = ref<CellClickPayload>(null)
 
 const handleRowClick = (rowIndex: number, _row: any) => {
   if (props.rowSelection) {
-    toggleRowSelection(rowIndex)
+    props.selectionState.toggleRowSelection(rowIndex)
   }
 }
 
diff --git a/src/ui/data-table/components/TableHeader.vue b/src/ui/data-table/components/TableHeader.vue
index c0beae80..8513100b 100644
--- a/src/ui/data-table/components/TableHeader.vue
+++ b/src/ui/data-table/components/TableHeader.vue
@@ -1,14 +1,13 @@
 <template>
   <div class="flex border-b bg-gray-100 relative w-full sticky top-0 z-10">
-    <!-- 选择列 -->
     <div v-if="rowSelection === 'multipleRow'"
          :style="{ width: '48px', flexShrink: 0 }"
          :class="[TablePaddingSize[size]]"
          class="flex items-center justify-center">
       <input type="checkbox"
-             :checked="isAllSelected"
-             :indeterminate="isIndeterminate"
-             @change="toggleAllRows"
+             :checked="selectionState.isAllSelected.value"
+             :indeterminate="selectionState.isIndeterminate.value"
+             @change="selectionState.toggleAllRows"
              class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"/>
     </div>
     <div v-else-if="rowSelection === 'singleRow'"
@@ -62,27 +61,18 @@ import { calcSize } from '@/utils/common'
 import { useResize } from '../hooks/useResize'
 import { useRowSelection } from '../hooks/useRowSelection'
 
-const props = withDefaults(defineProps<{
+withDefaults(defineProps<{
   columns: ColumnProps[]
   data: Record<string, any>[]
   size?: Size
   rowSelection?: RowSelectionMode
+  selectionState: ReturnType<typeof useRowSelection>
 }>(), {
   size: 'default'
 })
 
 const emits = defineEmits<DataTableHeaderEmits>()
 
-const {
-  isAllSelected,
-  isIndeterminate,
-  toggleAllRows
-} = useRowSelection(
-    props.rowSelection,
-    props.data,
-    emits
-)
-
 const handleSort = (column: ColumnProps, event: MouseEvent) => {
   event.stopPropagation()
   emits('on-sort', column, event)

From 5f35a35e486270ffd6bea13af13d352ea01b4cb9 Mon Sep 17 00:00:00 2001
From: qianmoQ <shicheng@devlive.org>
Date: Tue, 14 Jan 2025 14:31:41 +0800
Subject: [PATCH 17/27] =?UTF-8?q?=E7=BB=84=E4=BB=B6(=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E8=A1=A8=E6=A0=BC):=20=E6=94=AF=E6=8C=81=E5=8A=A0=E8=BD=BD?=
 =?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/data/data-table.md         | 31 ++++++++++++++++++++--
 src/App.vue                                | 19 ++++---------
 src/ui/data-table/ShadcnDataTable.vue      | 15 +++++++++--
 src/ui/data-table/components/TableBody.vue | 12 ++++++---
 src/ui/data-table/types.ts                 |  1 +
 5 files changed, 57 insertions(+), 21 deletions(-)

diff --git a/docs/components/data/data-table.md b/docs/components/data/data-table.md
index cdf0f49c..03f86bcc 100644
--- a/docs/components/data/data-table.md
+++ b/docs/components/data/data-table.md
@@ -117,7 +117,19 @@ title: 数据表格 (Data Table)
 ::: raw
 
 <CodeRunner title="分页 (pagination)" codeKey="data-table-pagination">
-    <ShadcnDataTable :columns="columns" :data="longData" height="300" :pagination="{ size: 5, options: [5, 10, 20, 50, 100] }">
+    <ShadcnDataTable :columns="columns" :data="longData" height="300" :pagination="{ size: 10, options: [5, 10, 20, 50, 100] }">
+    </ShadcnDataTable>
+</CodeRunner>
+
+:::
+
+## 加载中 (loading)
+
+::: raw
+
+<CodeRunner title="加载中 (loading)" codeKey="data-table-loading">
+    <ShadcnButton @click="loading = !loading">{{ loading ? '取消加载' : '设置加载' }}</ShadcnButton>
+    <ShadcnDataTable :columns="columns" :data="data" height="300" :pagination="{ size: 5, options: [5, 10, 20, 50, 100] }" :loading="loading">
     </ShadcnDataTable>
 </CodeRunner>
 
@@ -230,6 +242,7 @@ title: 数据表格 (Data Table)
         ['width', '表格宽度，支持输入数字和字符串会自动计算，如果是数字的情况时，单位为 px', 'string | number', '100%', '-'],
         ['pagination', '是否显示分页', 'object', '-', '-'],
         ['rowSelection', '行选择方式', 'enum', '-', 'singleRow | multipleRow'],
+        ['loading', '是否显示加载中', 'boolean', 'false', '-']
     ]">
 </ApiTable>
 
@@ -246,7 +259,7 @@ title: 数据表格 (Data Table)
         ['width', '宽度，支持输入数字和字符串会自动计算，如果是数字的情况时，单位为 px', 'string | number', 'auto', '-'],
         ['tooltip', '列内容是否显示提示', 'boolean', 'false', '-'],
         ['align', '对齐方式，可选值为', 'enum', 'left', 'left | right | center'],
-        ['resizable', '列是否可调整宽度', 'boolean', 'false', '-'],
+        ['resizable', '列是否可调整宽度', 'boolean', 'false', '-']
     ]">
 </ApiTable>
 
@@ -269,6 +282,18 @@ title: 数据表格 (Data Table)
         ['on-sort', '当表格排序发生变化时触发', '排序列的列表'],
         ['on-cell-click', '当单元格被点击时触发', '行索引，列的 key 值，行数据'],
         ['on-resizable', '当列宽度发生变化时触发', '当前列的信息，调整后列的宽度'],
+        ['on-page-change', '当页码发生变化时触发', '当前页码'],
+        ['on-size-change', '当分页尺寸发生变化时触发', '当前分页尺寸'],
+        ['on-row-select', '当行被选中时触发', '行索引，当前行数据，是否选中，选中的行数据'],
+    ]">
+</ApiTable>
+
+## 数据表格 (Data Table) 插槽
+
+<ApiTable title="数据表格 (Data Table) 插槽"
+    :headers="['插槽', '描述', '回调参数']"
+    :columns="[
+        ['loading', '加载中的插槽', '-'],
     ]">
 </ApiTable>
 
@@ -377,6 +402,8 @@ for (let i = 0; i < 1000; i++) {
   longData.value.push(item)
 }
 
+const loading = ref(false)
+
 const handleChange = () => {
   console.log('表格数据发生变化')
 }
diff --git a/src/App.vue b/src/App.vue
index d3176c79..a6b45432 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,20 +4,9 @@
                      :data="data"
                      size="small"
                      height="300"
-                     :pagination="{ size: 20, options: [5, 10, 20, 50, 100] }"
-                     row-selection="singleRow"
-                     @on-cell-click="handleCellClick"
-                     @on-resizable="handleResizable"
-                     @on-page-change="console.log('页码改变' + $event)"
-                     @on-size-change="console.log('每页条数改变' + $event)"
-                     @on-row-select="console.log('选中的数据条数 ' + $event?.selectedRows.length)">
-    </ShadcnDataTable>
-    <ShadcnDataTable :columns="columns"
-                     :data="data"
-                     size="small"
-                     height="300"
-                     :pagination="{ size: 20, options: [5, 10, 20, 50, 100] }"
                      row-selection="multipleRow"
+                     :pagination="{ size: 20, options: [5, 10, 20, 50, 100] }"
+                     :loading="loading"
                      @on-cell-click="handleCellClick"
                      @on-resizable="handleResizable"
                      @on-page-change="console.log('页码改变' + $event)"
@@ -33,11 +22,13 @@ import { setLocale } from '@/utils/locale.ts'
 
 setLocale('zh-CN')
 
+const loading = ref(true)
+
 const columns = ref([
   { key: 'index', label: '#', sortable: true, width: 50, align: 'center' },
   { key: 'title', label: '标题' },
   { key: 'author', label: '作者', sortable: true, resizable: true },
-  { key: 'description', label: '描述', width: 100, tooltip: true, resizable: true },
+  { key: 'description', label: '描述', width: 500, tooltip: true, resizable: true },
   { key: 'category', label: '分类', sortable: true, align: 'center' },
   { key: 'date', label: '发布日期', sortable: true }
 ])
diff --git a/src/ui/data-table/ShadcnDataTable.vue b/src/ui/data-table/ShadcnDataTable.vue
index d5720b17..bb03041f 100644
--- a/src/ui/data-table/ShadcnDataTable.vue
+++ b/src/ui/data-table/ShadcnDataTable.vue
@@ -1,6 +1,8 @@
 <template>
   <div class="overflow-auto rounded-sm border">
-    <div :style="{ width: calcSize(width), height: calcSize(height) }" class="relative w-full" style="overflow-x: auto">
+    <div :style="{ width: calcSize(width), height: calcSize(height) }"
+         class="relative w-full"
+         style="overflow-x: auto">
       <div class="inline-block bg-white">
         <TableHeader :columns="columns"
                      :size="size"
@@ -17,8 +19,16 @@
                    :size="size"
                    :row-selection="rowSelection"
                    :selection-state="selectionState"
+                   :loading="loading"
                    @on-cell-click="(payload) => emits('on-cell-click', payload as any)"
                    @on-row-select="(payload) => emits('on-row-select', payload as any)">
+          <template #loading>
+            <slot name="loading">
+              <div class="m-6">
+                <div class="h-6 w-6 animate-spin rounded-full border-2 border-primary border-t-transparent"></div>
+              </div>
+            </slot>
+          </template>
         </TableBody>
       </div>
     </div>
@@ -49,7 +59,8 @@ import { useRowSelection } from './hooks/useRowSelection'
 const props = withDefaults(defineProps<DataTableProps>(), {
   size: 'default',
   height: 'auto',
-  width: '100%'
+  width: '100%',
+  loading: false
 })
 
 const emits = defineEmits<DataTableEmits>()
diff --git a/src/ui/data-table/components/TableBody.vue b/src/ui/data-table/components/TableBody.vue
index fcc75ac9..3afeb67a 100644
--- a/src/ui/data-table/components/TableBody.vue
+++ b/src/ui/data-table/components/TableBody.vue
@@ -1,6 +1,10 @@
 <template>
-  <div class="flex flex-col w-full" ref="tableRef" @click.stop>
-    <div v-for="(row, rowIndex) in data"
+  <div class="relative flex flex-col w-full" ref="tableRef" @click.stop>
+    <div v-if="loading" class="absolute inset-0 z-50">
+      <slot name="loading"/>
+    </div>
+
+    <div v-else v-for="(row, rowIndex) in data"
          :key="rowIndex"
          :class="[
            'flex border-b items-center h-full',
@@ -69,8 +73,10 @@ const props = withDefaults(defineProps<{
   size?: Size
   rowSelection?: RowSelectionMode
   selectionState: ReturnType<typeof useRowSelection>
+  loading?: boolean
 }>(), {
-  size: 'default'
+  size: 'default',
+  loading: false
 })
 
 const emits = defineEmits<DataTableBodyEmits>()
diff --git a/src/ui/data-table/types.ts b/src/ui/data-table/types.ts
index 877c5940..95412df8 100644
--- a/src/ui/data-table/types.ts
+++ b/src/ui/data-table/types.ts
@@ -34,6 +34,7 @@ export interface DataTableProps
     size?: Size
     height?: number | string
     width?: number | string
+    loading?: boolean
     pagination?: PaginationProps
     rowSelection?: RowSelectionMode
 }

From eeebc1e1907e796844288fddd860a2c61468969f Mon Sep 17 00:00:00 2001
From: qianmoQ <shicheng@devlive.org>
Date: Tue, 14 Jan 2025 16:04:03 +0800
Subject: [PATCH 18/27] =?UTF-8?q?=E7=BB=84=E4=BB=B6(=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E8=A1=A8=E6=A0=BC):=20=E6=94=AF=E6=8C=81=E5=88=97=E4=BD=8D?=
 =?UTF-8?q?=E7=BD=AE=E7=A7=BB=E5=8A=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/components/data/data-table.md           | 14 ++-
 src/App.vue                                  |  7 +-
 src/ui/data-table/ShadcnDataTable.vue        | 10 ++-
 src/ui/data-table/components/TableBody.vue   |  4 +-
 src/ui/data-table/components/TableHeader.vue | 73 +++++++++++++---
 src/ui/data-table/hooks/useColumnDrag.ts     | 90 ++++++++++++++++++++
 src/ui/data-table/types.ts                   | 24 ++++--
 7 files changed, 197 insertions(+), 25 deletions(-)
 create mode 100644 src/ui/data-table/hooks/useColumnDrag.ts

diff --git a/docs/components/data/data-table.md b/docs/components/data/data-table.md
index 03f86bcc..948cce07 100644
--- a/docs/components/data/data-table.md
+++ b/docs/components/data/data-table.md
@@ -164,6 +164,17 @@ title: 数据表格 (Data Table)
 
 :::
 
+## 列移动 (move)
+
+::: raw
+
+<CodeRunner title="列移动 (move)" codeKey="data-table-move">
+    <ShadcnDataTable :columns="columns" :data="data" :column-move="true">
+    </ShadcnDataTable>
+</CodeRunner>
+
+:::
+
 ## 列排序 (sort)
 
 ::: raw
@@ -242,7 +253,8 @@ title: 数据表格 (Data Table)
         ['width', '表格宽度，支持输入数字和字符串会自动计算，如果是数字的情况时，单位为 px', 'string | number', '100%', '-'],
         ['pagination', '是否显示分页', 'object', '-', '-'],
         ['rowSelection', '行选择方式', 'enum', '-', 'singleRow | multipleRow'],
-        ['loading', '是否显示加载中', 'boolean', 'false', '-']
+        ['loading', '是否显示加载中', 'boolean', 'false', '-'],
+        ['columnMove', '是否允许列移动位置', 'boolean', 'false', '-'],
     ]">
 </ApiTable>
 
diff --git a/src/App.vue b/src/App.vue
index a6b45432..0e4b50af 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -6,12 +6,13 @@
                      height="300"
                      row-selection="multipleRow"
                      :pagination="{ size: 20, options: [5, 10, 20, 50, 100] }"
-                     :loading="loading"
+                     :column-move="true"
                      @on-cell-click="handleCellClick"
                      @on-resizable="handleResizable"
                      @on-page-change="console.log('页码改变' + $event)"
                      @on-size-change="console.log('每页条数改变' + $event)"
-                     @on-row-select="console.log('选中的数据条数 ' + $event?.selectedRows.length)">
+                     @on-row-select="console.log('选中的数据条数 ' + $event?.selectedRows.length)"
+                     @on-column-move="console.log('列移动 ' + JSON.stringify($event))">
     </ShadcnDataTable>
   </div>
 </template>
@@ -22,8 +23,6 @@ import { setLocale } from '@/utils/locale.ts'
 
 setLocale('zh-CN')
 
-const loading = ref(true)
-
 const columns = ref([
   { key: 'index', label: '#', sortable: true, width: 50, align: 'center' },
   { key: 'title', label: '标题' },
diff --git a/src/ui/data-table/ShadcnDataTable.vue b/src/ui/data-table/ShadcnDataTable.vue
index bb03041f..f363c196 100644
--- a/src/ui/data-table/ShadcnDataTable.vue
+++ b/src/ui/data-table/ShadcnDataTable.vue
@@ -9,9 +9,11 @@
                      :data="displayData"
                      :row-selection="rowSelection"
                      :selection-state="selectionState"
+                     :column-move="columnMove"
                      @on-sort="handleSortChange"
                      @on-resizable="(column, _width) => emits('on-resizable', column, _width)"
-                     @on-row-select="(payload) => emits('on-row-select', payload as any)">
+                     @on-row-select="(payload) => emits('on-row-select', payload as any)"
+                     @on-column-move="handleColumnMove">
         </TableHeader>
 
         <TableBody :columns="columns"
@@ -124,4 +126,10 @@ const selectionState = useRowSelection(
     displayData.value,
     emits
 )
+
+const handleColumnMove = (payload: ColumnProps[]) => {
+  columns.value = payload
+
+  emits('on-column-move', payload)
+}
 </script>
\ No newline at end of file
diff --git a/src/ui/data-table/components/TableBody.vue b/src/ui/data-table/components/TableBody.vue
index 3afeb67a..063b1d70 100644
--- a/src/ui/data-table/components/TableBody.vue
+++ b/src/ui/data-table/components/TableBody.vue
@@ -45,7 +45,7 @@
            }"
            :class="[
              TablePaddingSize[size],
-             `text-${col.align || 'left'}`,
+             TextAlign[col.align || 'left'],
              col.ellipsis !== false ? 'relative truncate whitespace-nowrap overflow-hidden' : 'break-words whitespace-normal',
              (selectedCell?.rowIndex === rowIndex && selectedCell?.col === col.key) && 'border border-blue-400'
            ]"
@@ -59,7 +59,7 @@
 </template>
 
 <script setup lang="ts">
-import { CellClickPayload, ColumnProps, DataTableBodyEmits, RowSelectionMode } from '../types'
+import { CellClickPayload, ColumnProps, DataTableBodyEmits, RowSelectionMode, TextAlign } from '../types'
 import { BaseSize } from '@/ui/common/size'
 import { Size, TablePaddingSize } from '../size'
 import { onMounted, onUnmounted, ref } from 'vue'
diff --git a/src/ui/data-table/components/TableHeader.vue b/src/ui/data-table/components/TableHeader.vue
index 8513100b..62d72a1e 100644
--- a/src/ui/data-table/components/TableHeader.vue
+++ b/src/ui/data-table/components/TableHeader.vue
@@ -15,19 +15,48 @@
     </div>
 
     <!-- 数据列 -->
-    <div v-for="col in columns"
+    <div v-for="col in localColumns"
          :key="col.key"
          :style="[
            { width: calcSize(col.width || 150) },
            { position: 'relative', flexShrink: 0 }
          ]"
-         :class="[
-           `text-${col.align || 'left'} font-medium`,
+         :class="[ 'font-medium',
+           TextAlign[col.align || 'left'],
            TablePaddingSize[size],
-           col.sortable && 'cursor-pointer select-none'
-         ]"
-         @click="col.sortable && handleSort(col, $event)">
-      <div class="inline-flex items-center">
+           isDragOver(col) && 'border-2 h-full w-full border-blue-500 border-dashed'
+         ]">
+      <!-- 拖拽区域 -->
+      <div v-if="columnMove"
+           :draggable="true"
+           class="h-full w-full cursor-move select-none"
+           @dragend="handleDragEnd"
+           @dragleave="handleDragEnd"
+           @dragstart="(e) => handleDragStart(col, e)"
+           @dragover.prevent="(e) => handleDragOver(col, e)"
+           @drop.prevent="(e) => handleDrop(col, e)">
+        <div class="inline-flex items-center flex-1 justify-inherit"
+             @click="col.sortable && handleSort(col, $event)">
+          <span>{{ col.label }}</span>
+          <div v-if="col.sortable"
+               class="inline-flex items-center ml-2 min-w-[1em]">
+            <ShadcnIcon :class="[
+                          'font-semibold transition-transform',
+                          col.sort ? 'opacity-100' : 'opacity-0',
+                          col.sort === 'asc' && 'text-blue-500',
+                          col.sort === 'desc' && 'rotate-180 text-blue-500'
+                        ]"
+                        icon="MoveUp"
+                        size="16">
+            </ShadcnIcon>
+          </div>
+        </div>
+      </div>
+
+      <!-- 非拖拽状态 -->
+      <div v-else
+           class="h-full w-full"
+           @click="col.sortable && handleSort(col, $event)">
         <span>{{ col.label }}</span>
         <div v-if="col.sortable"
              class="inline-flex items-center ml-2 min-w-[1em]">
@@ -42,6 +71,8 @@
           </ShadcnIcon>
         </div>
       </div>
+
+      <!-- 调整宽度的区域 -->
       <div v-if="col.resizable"
            data-resize-handle
            class="absolute top-0 right-0 h-full w-1 cursor-col-resize flex items-center justify-center group"
@@ -54,25 +85,47 @@
 </template>
 
 <script setup lang="ts">
-import { ColumnProps, DataTableHeaderEmits, RowSelectionMode } from '../types'
+import { ref, watch } from 'vue'
+import { ColumnProps, DataTableHeaderEmits, RowSelectionMode, TextAlign } from '../types'
 import { Size, TablePaddingSize } from '../size'
 import ShadcnIcon from '@/ui/icon'
 import { calcSize } from '@/utils/common'
 import { useResize } from '../hooks/useResize'
 import { useRowSelection } from '../hooks/useRowSelection'
+import { useColumnDrag } from '../hooks/useColumnDrag'
 
-withDefaults(defineProps<{
+const props = withDefaults(defineProps<{
   columns: ColumnProps[]
   data: Record<string, any>[]
   size?: Size
   rowSelection?: RowSelectionMode
   selectionState: ReturnType<typeof useRowSelection>
+  columnMove?: boolean
 }>(), {
-  size: 'default'
+  size: 'default',
+  columnMove: false
 })
 
 const emits = defineEmits<DataTableHeaderEmits>()
 
+// 本地维护列数据，用于拖拽时的状态管理
+const localColumns = ref<ColumnProps[]>([...props.columns])
+
+watch(() => props.columns, (newColumns) => {
+  localColumns.value = [...newColumns]
+}, { deep: true })
+
+const {
+  handleDragStart,
+  handleDragOver,
+  handleDragEnd,
+  handleDrop,
+  isDragOver
+} = useColumnDrag(localColumns, props.columnMove, (event, columns) => {
+  localColumns.value = [...columns] // 首先更新本地状态
+  emits(event, columns)
+})
+
 const handleSort = (column: ColumnProps, event: MouseEvent) => {
   event.stopPropagation()
   emits('on-sort', column, event)
diff --git a/src/ui/data-table/hooks/useColumnDrag.ts b/src/ui/data-table/hooks/useColumnDrag.ts
new file mode 100644
index 00000000..096b8c4b
--- /dev/null
+++ b/src/ui/data-table/hooks/useColumnDrag.ts
@@ -0,0 +1,90 @@
+import { ref, Ref } from 'vue'
+import type { ColumnProps } from '../types'
+
+export const useColumnDrag = (
+    columns: Ref<ColumnProps[]>,
+    enabled: boolean = false,
+    emit: (event: 'on-column-move', columns: ColumnProps[]) => void
+) => {
+    const dragOverColumn = ref<ColumnProps | null>(null)
+
+    const handleDragStart = (column: ColumnProps, event: DragEvent) => {
+        if (!enabled || !event.dataTransfer) {
+            return
+        }
+        event.dataTransfer.effectAllowed = 'move'
+
+        // 创建拖拽缩略图
+        if (event.target instanceof HTMLElement) {
+            const dragImage = event.target.cloneNode(true) as HTMLElement
+            dragImage.className = 'bg-white p-2 rounded-sm text-center border'
+            dragImage.style.position = 'absolute'
+            document.body.appendChild(dragImage)
+
+            // 设置拖拽缩略图
+            event.dataTransfer.setDragImage(dragImage, 0, 0)
+
+            // 在下一个事件循环中移除临时元素
+            setTimeout(() => {
+                document.body.removeChild(dragImage)
+            }, 0)
+        }
+
+        event.dataTransfer.setData('text/column-key', column.key)
+    }
+
+    const handleDragOver = (column: ColumnProps, event: DragEvent) => {
+        if (!enabled) {
+            return
+        }
+        event.preventDefault()
+        event.dataTransfer!.dropEffect = 'move'
+        dragOverColumn.value = column
+    }
+
+    const handleDrop = (column: ColumnProps, event: DragEvent) => {
+        if (!enabled) {
+            return
+        }
+        event.preventDefault()
+
+        const draggedColumnKey = event.dataTransfer?.getData('text/column-key')
+        if (!draggedColumnKey) {
+            return
+        }
+
+        const fromIndex = columns.value.findIndex(col => col.key === draggedColumnKey)
+        const toIndex = columns.value.findIndex(col => col.key === column.key)
+
+        if (fromIndex !== -1 && toIndex !== -1 && fromIndex !== toIndex) {
+            const newColumns = [...columns.value]
+            const [movedColumn] = newColumns.splice(fromIndex, 1)
+            newColumns.splice(toIndex, 0, movedColumn)
+
+            emit('on-column-move', newColumns)
+        }
+
+        dragOverColumn.value = null
+    }
+
+    const handleDragEnd = () => {
+        dragOverColumn.value = null
+    }
+
+    const isDragging = (_column: ColumnProps): boolean => {
+        return false
+    }
+
+    const isDragOver = (column: ColumnProps): boolean => {
+        return dragOverColumn.value?.key === column.key
+    }
+
+    return {
+        handleDragStart,
+        handleDragOver,
+        handleDragEnd,
+        handleDrop,
+        isDragging,
+        isDragOver
+    }
+}
\ No newline at end of file
diff --git a/src/ui/data-table/types.ts b/src/ui/data-table/types.ts
index 95412df8..08b96296 100644
--- a/src/ui/data-table/types.ts
+++ b/src/ui/data-table/types.ts
@@ -6,6 +6,13 @@ export type RowSelectionMode = 'singleRow' | 'multipleRow'
 export type CellClickPayload = { rowIndex: number; col: string; row: any } | null
 export type RowSelectPayload = { rowIndex: number; row: any, selected: boolean, selectedRows: any[] } | null
 
+export enum TextAlign
+{
+    left = 'text-left',
+    center = 'text-center',
+    right = 'text-right'
+}
+
 export interface PaginationProps
 {
     size?: number
@@ -23,7 +30,7 @@ export interface ColumnProps
     ellipsis?: boolean // 是否省略
     width?: string // 宽度，支持输入数字和字符串会自动计算，如果是数字的情况时，单位为 px
     tooltip?: string
-    align?: 'left' | 'center' | 'right'
+    align?: TextAlign
     resizable?: boolean
 }
 
@@ -37,6 +44,14 @@ export interface DataTableProps
     loading?: boolean
     pagination?: PaginationProps
     rowSelection?: RowSelectionMode
+    columnMove?: boolean // 是否允许移动列，移动后可以调整位置
+}
+
+export type DataTableHeaderEmits = {
+    (e: 'on-sort', column: ColumnProps, event: MouseEvent): void
+    (e: 'on-resizable', column: ColumnProps, width: number): void
+    (e: 'on-row-select', payload: RowSelectPayload): void
+    (e: 'on-column-move', columns: ColumnProps[]): void
 }
 
 export type DataTableEmits = {
@@ -46,12 +61,7 @@ export type DataTableEmits = {
     (e: 'on-page-change', page: number): void
     (e: 'on-size-change', size: number): void
     (e: 'on-row-select', payload: RowSelectPayload): void
-}
-
-export type DataTableHeaderEmits = {
-    (e: 'on-sort', column: ColumnProps, event: MouseEvent): void
-    (e: 'on-resizable', column: ColumnProps, width: number): void
-    (e: 'on-row-select', payload: RowSelectPayload): void
+    (e: 'on-column-move', columns: ColumnProps[]): void
 }
 
 export type DataTableBodyEmits = {

From f6a14f4b1bba06ad50b34e64b7ddba3e376cf011 Mon Sep 17 00:00:00 2001
From: qianmoQ <shicheng@devlive.org>
Date: Tue, 14 Jan 2025 16:16:05 +0800
Subject: [PATCH 19/27] =?UTF-8?q?=E7=BB=84=E4=BB=B6(=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E8=A1=A8=E6=A0=BC):=20=E6=B7=BB=E5=8A=A0=E7=A9=BA=E6=95=B0?=
 =?UTF-8?q?=E6=8D=AE=E6=8F=90=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/components/data/data-table.md         | 13 +++++++++++++
 src/App.vue                                |  2 +-
 src/ui/data-table/ShadcnDataTable.vue      | 11 +++++++++++
 src/ui/data-table/components/TableBody.vue |  6 +++++-
 4 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/docs/components/data/data-table.md b/docs/components/data/data-table.md
index 948cce07..c4d18540 100644
--- a/docs/components/data/data-table.md
+++ b/docs/components/data/data-table.md
@@ -135,6 +135,17 @@ title: 数据表格 (Data Table)
 
 :::
 
+## 空数据 (empty)
+
+::: raw
+
+<CodeRunner title="空数据 (empty)" codeKey="data-table-empty">
+    <ShadcnDataTable :columns="columns" :data="[]">
+    </ShadcnDataTable>
+</CodeRunner>
+
+:::
+
 ## 行选择 (selection)
 
 ::: raw
@@ -297,6 +308,7 @@ title: 数据表格 (Data Table)
         ['on-page-change', '当页码发生变化时触发', '当前页码'],
         ['on-size-change', '当分页尺寸发生变化时触发', '当前分页尺寸'],
         ['on-row-select', '当行被选中时触发', '行索引，当前行数据，是否选中，选中的行数据'],
+        ['on-column-move', '当列被移动时触发', '移动后的列列表'],
     ]">
 </ApiTable>
 
@@ -306,6 +318,7 @@ title: 数据表格 (Data Table)
     :headers="['插槽', '描述', '回调参数']"
     :columns="[
         ['loading', '加载中的插槽', '-'],
+        ['empty', '空数据的插槽', '-'],
     ]">
 </ApiTable>
 
diff --git a/src/App.vue b/src/App.vue
index 0e4b50af..c063923e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="p-32 space-y-4">
     <ShadcnDataTable :columns="columns"
-                     :data="data"
+                     :data="[]"
                      size="small"
                      height="300"
                      row-selection="multipleRow"
diff --git a/src/ui/data-table/ShadcnDataTable.vue b/src/ui/data-table/ShadcnDataTable.vue
index f363c196..c4854e00 100644
--- a/src/ui/data-table/ShadcnDataTable.vue
+++ b/src/ui/data-table/ShadcnDataTable.vue
@@ -31,6 +31,16 @@
               </div>
             </slot>
           </template>
+
+          <template #empty>
+            <slot name="empty">
+              <ShadcnEmpty class="mt-6">
+                <template #actions>
+                  <span></span>
+                </template>
+              </ShadcnEmpty>
+            </slot>
+          </template>
         </TableBody>
       </div>
     </div>
@@ -57,6 +67,7 @@ import { useSort } from './hooks/useSort'
 import { calcSize } from '@/utils/common'
 import { usePagination } from './hooks/usePagination'
 import { useRowSelection } from './hooks/useRowSelection'
+import { ShadcnEmpty } from '@/ui/empty'
 
 const props = withDefaults(defineProps<DataTableProps>(), {
   size: 'default',
diff --git a/src/ui/data-table/components/TableBody.vue b/src/ui/data-table/components/TableBody.vue
index 063b1d70..a60ec977 100644
--- a/src/ui/data-table/components/TableBody.vue
+++ b/src/ui/data-table/components/TableBody.vue
@@ -4,7 +4,7 @@
       <slot name="loading"/>
     </div>
 
-    <div v-else v-for="(row, rowIndex) in data"
+    <div v-else-if="data && data.length > 0" v-for="(row, rowIndex) in data"
          :key="rowIndex"
          :class="[
            'flex border-b items-center h-full',
@@ -55,6 +55,10 @@
         {{ row[col.key] }}
       </div>
     </div>
+
+    <div v-else>
+      <slot name="empty"/>
+    </div>
   </div>
 </template>
 

From c019784594ef23d984b660a82988008c6f2f040d Mon Sep 17 00:00:00 2001
From: qianmoQ <shicheng@devlive.org>
Date: Tue, 14 Jan 2025 17:48:17 +0800
Subject: [PATCH 20/27] =?UTF-8?q?=E7=BB=84=E4=BB=B6(=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E8=A1=A8=E6=A0=BC):=20=E6=94=AF=E6=8C=81=E5=8D=95=E5=85=83?=
 =?UTF-8?q?=E6=A0=BC=E7=BC=96=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/components/data/data-table.md         | 27 ++++++-
 src/App.vue                                |  9 +--
 src/ui/data-table/ShadcnDataTable.vue      |  3 +-
 src/ui/data-table/components/TableBody.vue | 83 ++++++++++++++++------
 src/ui/data-table/components/TableCell.vue | 37 ++++++++++
 src/ui/data-table/hooks/useEditable.ts     | 53 ++++++++++++++
 src/ui/data-table/types.ts                 |  4 ++
 7 files changed, 187 insertions(+), 29 deletions(-)
 create mode 100644 src/ui/data-table/components/TableCell.vue
 create mode 100644 src/ui/data-table/hooks/useEditable.ts

diff --git a/docs/components/data/data-table.md b/docs/components/data/data-table.md
index c4d18540..87e8a4a9 100644
--- a/docs/components/data/data-table.md
+++ b/docs/components/data/data-table.md
@@ -252,6 +252,17 @@ title: 数据表格 (Data Table)
 
 :::
 
+## 列编辑 (editable)
+
+::: raw
+
+<CodeRunner title="列编辑 (editable)" codeKey="data-table-editable" warning="只需要在列上添加 editable 属性即可">
+    <ShadcnDataTable :columns="editableColumns" :data="data" @on-cell-edit="onCellEdit($event)">
+    </ShadcnDataTable>
+</CodeRunner>   
+
+:::
+
 ## 数据表格 (Data Table) 属性
 
 <ApiTable title="数据表格 (Data Table) 属性"
@@ -323,7 +334,8 @@ title: 数据表格 (Data Table)
 </ApiTable>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, getCurrentInstance } from 'vue'
+const { proxy } = getCurrentInstance()!
 
 const columns = ref([
   { key: 'title', label: '标题' },
@@ -381,6 +393,14 @@ const resizableColumns = ref([
   { key: 'date', label: '发布日期', resizable: true }
 ])
 
+const editableColumns = ref([
+  { key: 'title', label: '标题', editable: true },
+  { key: 'author', label: '作者' },
+  { key: 'description', label: '描述' },
+  { key: 'category', label: '分类' },
+  { key: 'date', label: '发布日期' }
+])
+
 const data = ref([
   {
     title: '深入理解 Vue.js 响应式系统的原理与实现',
@@ -432,4 +452,9 @@ const loading = ref(false)
 const handleChange = () => {
   console.log('表格数据发生变化')
 }
+
+const onCellEdit = (value: any) => proxy?.$Message.success({
+    content: `编辑的列 [ ${value.key} ] 的值为 [ ${ value.value } ]`,
+    showIcon: true
+})
 </script>
\ No newline at end of file
diff --git a/src/App.vue b/src/App.vue
index c063923e..011a3d7e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="p-32 space-y-4">
     <ShadcnDataTable :columns="columns"
-                     :data="[]"
+                     :data="data"
                      size="small"
                      height="300"
                      row-selection="multipleRow"
@@ -12,7 +12,8 @@
                      @on-page-change="console.log('页码改变' + $event)"
                      @on-size-change="console.log('每页条数改变' + $event)"
                      @on-row-select="console.log('选中的数据条数 ' + $event?.selectedRows.length)"
-                     @on-column-move="console.log('列移动 ' + JSON.stringify($event))">
+                     @on-column-move="console.log('列移动 ' + JSON.stringify($event))"
+                     @on-cell-edit="console.log('单元格编辑 ' + JSON.stringify($event))">
     </ShadcnDataTable>
   </div>
 </template>
@@ -25,9 +26,9 @@ setLocale('zh-CN')
 
 const columns = ref([
   { key: 'index', label: '#', sortable: true, width: 50, align: 'center' },
-  { key: 'title', label: '标题' },
+  { key: 'title', label: '标题', editable: true },
   { key: 'author', label: '作者', sortable: true, resizable: true },
-  { key: 'description', label: '描述', width: 500, tooltip: true, resizable: true },
+  { key: 'description', label: '描述', width: 500, tooltip: true, resizable: true, editable: true },
   { key: 'category', label: '分类', sortable: true, align: 'center' },
   { key: 'date', label: '发布日期', sortable: true }
 ])
diff --git a/src/ui/data-table/ShadcnDataTable.vue b/src/ui/data-table/ShadcnDataTable.vue
index c4854e00..9dfa66b7 100644
--- a/src/ui/data-table/ShadcnDataTable.vue
+++ b/src/ui/data-table/ShadcnDataTable.vue
@@ -23,7 +23,8 @@
                    :selection-state="selectionState"
                    :loading="loading"
                    @on-cell-click="(payload) => emits('on-cell-click', payload as any)"
-                   @on-row-select="(payload) => emits('on-row-select', payload as any)">
+                   @on-row-select="(payload) => emits('on-row-select', payload as any)"
+                   @on-cell-edit="(payload) => emits('on-cell-edit', payload as any)">
           <template #loading>
             <slot name="loading">
               <div class="m-6">
diff --git a/src/ui/data-table/components/TableBody.vue b/src/ui/data-table/components/TableBody.vue
index a60ec977..97b0b646 100644
--- a/src/ui/data-table/components/TableBody.vue
+++ b/src/ui/data-table/components/TableBody.vue
@@ -13,7 +13,6 @@
            !selectionState.isRowSelected(rowIndex) && 'hover:bg-gray-50'
          ]"
          @click="handleRowClick(rowIndex, row)">
-      <!-- 选择列 -->
       <div v-if="rowSelection === 'multipleRow'"
            :style="{ width: '48px', flexShrink: 0 }"
            :class="[TablePaddingSize[size]]"
@@ -26,7 +25,6 @@
       </div>
       <div v-else-if="rowSelection === 'singleRow'"
            :style="{ width: '48px', flexShrink: 0 }"
-           :class="[TablePaddingSize[size]]"
            class="flex items-center justify-center"
            @click.stop>
         <input type="radio"
@@ -36,24 +34,33 @@
                class="w-4 h-4 border-gray-300 text-blue-600 focus:ring-blue-500"/>
       </div>
 
-      <!-- 数据列 -->
-      <div v-for="col in columns"
-           :key="col.key"
-           :style="{
-             width: calcSize(col.width || 150),
-             flex: 'none'
-           }"
-           :class="[
-             TablePaddingSize[size],
-             TextAlign[col.align || 'left'],
-             col.ellipsis !== false ? 'relative truncate whitespace-nowrap overflow-hidden' : 'break-words whitespace-normal',
-             (selectedCell?.rowIndex === rowIndex && selectedCell?.col === col.key) && 'border border-blue-400'
-           ]"
-           @mousemove.stop.prevent="(col.ellipsis !== false && col.tooltip) && showTooltip($event, row[col.key])"
-           @mouseleave.stop.prevent="hideTooltip"
-           @click.stop="selectCell(rowIndex, col.key, row)">
-        {{ row[col.key] }}
-      </div>
+      <template v-for="col in columns" :key="col.key">
+        <TableCell v-if="col.editable && editableState.isEditing(rowIndex, col.key)"
+                   :align="col.align"
+                   :size="size"
+                   :value="row[col.key]"
+                   :width="calcSize(col.width || 150)"
+                   @cancel="editableState.stopEditing"
+                   @save="handleSaveEdit(rowIndex, col.key, $event, row)"/>
+
+        <div v-else
+             :class="[
+               TablePaddingSize[size],
+               TextAlign[col.align || 'left'],
+               col.ellipsis !== false ? 'relative truncate whitespace-nowrap overflow-hidden' : 'break-words whitespace-normal',
+               ((selectedCell?.rowIndex === rowIndex && selectedCell?.col === col.key) && !editableState.isEditing(rowIndex, col.key)) && 'border border-blue-400'
+             ]"
+             :style="{
+               width: calcSize(col.width || 150),
+               flex: 'none'
+             }"
+             @mousemove.stop.prevent="(col.ellipsis !== false && col.tooltip) && showTooltip($event, row[col.key])"
+             @mouseleave.stop.prevent="hideTooltip"
+             @click.stop="handleCellClick(rowIndex, col.key, row)"
+             @dblclick.stop="handleCellDblClick(rowIndex, col.key, row, col)">
+          {{ row[col.key] }}
+        </div>
+      </template>
     </div>
 
     <div v-else>
@@ -70,6 +77,8 @@ import { onMounted, onUnmounted, ref } from 'vue'
 import { useTooltip } from '../hooks/useTooltip'
 import { calcSize } from '@/utils/common'
 import { useRowSelection } from '../hooks/useRowSelection'
+import { useEditable } from '../hooks/useEditable'
+import TableCell from '@/ui/data-table/components/TableCell.vue'
 
 const props = withDefaults(defineProps<{
   columns: ColumnProps[]
@@ -88,20 +97,48 @@ const emits = defineEmits<DataTableBodyEmits>()
 const tableRef = ref<HTMLElement | null>(null)
 const selectedCell = ref<CellClickPayload>(null)
 
+const editableState = useEditable()
+
+const handleSaveEdit = (_rowIndex: number, _key: string, value: any, row: any) => {
+  const lastEditState = editableState.stopEditing(value)
+  if (lastEditState) {
+    emits('on-cell-edit', {
+      rowIndex: lastEditState.rowIndex,
+      key: lastEditState.key,
+      value: lastEditState.value,
+      row: row
+    })
+  }
+}
+
 const handleRowClick = (rowIndex: number, _row: any) => {
-  if (props.rowSelection) {
+  if (props.rowSelection && editableState.isEditing(rowIndex, _row.key)) {
     props.selectionState.toggleRowSelection(rowIndex)
   }
 }
 
-const selectCell = (rowIndex: number, col: string, row: any) => {
+const handleCellClick = (rowIndex: number, col: string, row: any) => {
   selectedCell.value = { rowIndex, row, col }
   emits('on-cell-click', { rowIndex, row, col })
 }
 
+const handleCellDblClick = (rowIndex: number, key: string, row: any, column: ColumnProps) => {
+  if (column.editable) {
+    editableState.startEditing(rowIndex, key, row[key], column)
+  }
+}
+
 const clearSelectedCell = () => {
   selectedCell.value = null
-  emits('on-cell-click', selectedCell.value)
+  const lastEditState = editableState.stopEditing()
+  if (lastEditState) {
+    emits('on-cell-edit', {
+      rowIndex: lastEditState.rowIndex,
+      key: lastEditState.key,
+      value: lastEditState.value,
+      row: lastEditState.row
+    })
+  }
 }
 
 const handleClickOutside = (event: MouseEvent) => {
diff --git a/src/ui/data-table/components/TableCell.vue b/src/ui/data-table/components/TableCell.vue
new file mode 100644
index 00000000..adddc19c
--- /dev/null
+++ b/src/ui/data-table/components/TableCell.vue
@@ -0,0 +1,37 @@
+<template>
+  <div :style="{ width: calcSize(width) }">
+    <ShadcnInput v-model="inputValue"
+                 @blur="handleBlur"
+                 @keydown.enter="handleBlur"
+                 @keydown.esc="handleCancel">
+    </ShadcnInput>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { TextAlign } from '../types'
+import ShadcnInput from '@/ui/input'
+import { calcSize } from '@/utils/common.ts'
+
+const props = defineProps<{
+  value: any
+  align?: TextAlign
+  width: string
+}>()
+
+const emit = defineEmits<{
+  'save': [value: any]
+  'cancel': []
+}>()
+
+const inputValue = ref(props.value)
+
+const handleBlur = () => {
+  emit('save', inputValue.value)
+}
+
+const handleCancel = () => {
+  emit('cancel')
+}
+</script>
\ No newline at end of file
diff --git a/src/ui/data-table/hooks/useEditable.ts b/src/ui/data-table/hooks/useEditable.ts
new file mode 100644
index 00000000..94a2b8b4
--- /dev/null
+++ b/src/ui/data-table/hooks/useEditable.ts
@@ -0,0 +1,53 @@
+import { ref, Ref } from 'vue'
+import { CellPayload } from '../types.ts'
+
+export interface UseEditableReturn
+{
+    editingCell: Ref<CellPayload | null>
+    startEditing: (rowIndex: number, key: string, value: any, row: any) => void
+    stopEditing: (value?: any) => CellPayload | null  // 返回最后的编辑状态
+    updateValue: (value: any) => void
+    isEditing: (rowIndex: number, key: string) => boolean
+}
+
+export const useEditable = (): UseEditableReturn => {
+    const editingCell = ref<CellPayload | null>(null)
+
+    const startEditing = (rowIndex: number, key: string, value: any, row: any) => {
+        editingCell.value = { rowIndex, key, value, row }
+    }
+
+    const stopEditing = (newValue?: any) => {
+        if (!editingCell.value) {
+            return null
+        }
+
+        const lastEditState = {
+            ...editingCell.value,
+            value: newValue ?? editingCell.value.value
+        }
+        editingCell.value = null
+        return lastEditState
+    }
+
+    const updateValue = (value: any) => {
+        if (editingCell.value) {
+            editingCell.value.value = value
+        }
+    }
+
+    const isEditing = (rowIndex: number, key: string): boolean => {
+        return (
+            editingCell.value?.rowIndex === rowIndex &&
+            editingCell.value?.key === key
+        )
+    }
+
+    return {
+        editingCell,
+        startEditing,
+        stopEditing,
+        updateValue,
+        isEditing
+    }
+}
\ No newline at end of file
diff --git a/src/ui/data-table/types.ts b/src/ui/data-table/types.ts
index 08b96296..b62f21b3 100644
--- a/src/ui/data-table/types.ts
+++ b/src/ui/data-table/types.ts
@@ -5,6 +5,7 @@ export type RowSelectionMode = 'singleRow' | 'multipleRow'
 
 export type CellClickPayload = { rowIndex: number; col: string; row: any } | null
 export type RowSelectPayload = { rowIndex: number; row: any, selected: boolean, selectedRows: any[] } | null
+export type CellPayload = { rowIndex: number; key: string; value: any; row: any }
 
 export enum TextAlign
 {
@@ -32,6 +33,7 @@ export interface ColumnProps
     tooltip?: string
     align?: TextAlign
     resizable?: boolean
+    editable?: boolean
 }
 
 export interface DataTableProps
@@ -62,11 +64,13 @@ export type DataTableEmits = {
     (e: 'on-size-change', size: number): void
     (e: 'on-row-select', payload: RowSelectPayload): void
     (e: 'on-column-move', columns: ColumnProps[]): void
+    (e: 'on-cell-edit', payload: CellPayload): void
 }
 
 export type DataTableBodyEmits = {
     (e: 'on-cell-click', payload: CellClickPayload): void
     (e: 'on-row-select', payload: RowSelectPayload): void
+    (e: 'on-cell-edit', payload: CellPayload): void
 }
 
 export  type DataTablePaginationEmits = {

From e21898363e9d7e5ba76171c4b8e04aa0e97a01d1 Mon Sep 17 00:00:00 2001
From: qianmoQ <shicheng@devlive.org>
Date: Tue, 14 Jan 2025 18:19:58 +0800
Subject: [PATCH 21/27] =?UTF-8?q?=E7=BB=84=E4=BB=B6(=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E8=A1=A8=E6=A0=BC):=20=E6=94=AF=E6=8C=81=E8=87=AA=E5=AE=9A?=
 =?UTF-8?q?=E4=B9=89=E5=8D=95=E5=85=83=E6=A0=BC=E7=BC=96=E8=BE=91=E5=99=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/components/data/data-table.md         |  5 ++-
 src/App.vue                                | 23 ++++++++--
 src/SelectEditor.vue                       | 50 ++++++++++++++++++++++
 src/ui/data-table/components/TableBody.vue | 11 ++++-
 src/ui/data-table/types.ts                 |  3 ++
 5 files changed, 85 insertions(+), 7 deletions(-)
 create mode 100644 src/SelectEditor.vue

diff --git a/docs/components/data/data-table.md b/docs/components/data/data-table.md
index 87e8a4a9..3bea9c68 100644
--- a/docs/components/data/data-table.md
+++ b/docs/components/data/data-table.md
@@ -293,7 +293,10 @@ title: 数据表格 (Data Table)
         ['width', '宽度，支持输入数字和字符串会自动计算，如果是数字的情况时，单位为 px', 'string | number', 'auto', '-'],
         ['tooltip', '列内容是否显示提示', 'boolean', 'false', '-'],
         ['align', '对齐方式，可选值为', 'enum', 'left', 'left | right | center'],
-        ['resizable', '列是否可调整宽度', 'boolean', 'false', '-']
+        ['resizable', '列是否可调整宽度', 'boolean', 'false', '-'],
+        ['editable', '列是否可编辑', 'boolean', 'false', '-'],
+        ['cellEditor', '单元格编辑器', 'component', '-', '-'],
+        ['cellEditorProps', '单元格编辑器的属性', 'object', '-', '-'],
     ]">
 </ApiTable>
 
diff --git a/src/App.vue b/src/App.vue
index 011a3d7e..ab29b5a2 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,7 +2,6 @@
   <div class="p-32 space-y-4">
     <ShadcnDataTable :columns="columns"
                      :data="data"
-                     size="small"
                      height="300"
                      row-selection="multipleRow"
                      :pagination="{ size: 20, options: [5, 10, 20, 50, 100] }"
@@ -13,20 +12,31 @@
                      @on-size-change="console.log('每页条数改变' + $event)"
                      @on-row-select="console.log('选中的数据条数 ' + $event?.selectedRows.length)"
                      @on-column-move="console.log('列移动 ' + JSON.stringify($event))"
-                     @on-cell-edit="console.log('单元格编辑 ' + JSON.stringify($event))">
+                     @on-cell-edit="onCellEdit">
     </ShadcnDataTable>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { getCurrentInstance, ref } from 'vue'
 import { setLocale } from '@/utils/locale.ts'
+import SelectEditor from '@/SelectEditor.vue'
 
 setLocale('zh-CN')
 
+const { proxy } = getCurrentInstance()!
+
 const columns = ref([
   { key: 'index', label: '#', sortable: true, width: 50, align: 'center' },
-  { key: 'title', label: '标题', editable: true },
+  {
+    key: 'title', label: '标题', editable: true, cellEditor: SelectEditor,
+    cellEditorProps: {
+      options: [
+        { label: 'Active', value: 'active' },
+        { label: 'Inactive', value: 'inactive' }
+      ]
+    }
+  },
   { key: 'author', label: '作者', sortable: true, resizable: true },
   { key: 'description', label: '描述', width: 500, tooltip: true, resizable: true, editable: true },
   { key: 'category', label: '分类', sortable: true, align: 'center' },
@@ -92,4 +102,9 @@ const handleCellClick = (playload: { rowIndex: number; col: string; row: any })
 const handleResizable = (column: any, width: number) => {
   console.log(`调整了 ${ column.label } 列的宽度为 ${ width }`)
 }
+
+const onCellEdit = (value: any) => proxy?.$Message.success({
+  content: `编辑的列 [ ${ value.key } ] 的值为 [ ${ value.value } ]`,
+  showIcon: true
+})
 </script>
\ No newline at end of file
diff --git a/src/SelectEditor.vue b/src/SelectEditor.vue
new file mode 100644
index 00000000..e4b22a45
--- /dev/null
+++ b/src/SelectEditor.vue
@@ -0,0 +1,50 @@
+<template>
+  <div :style="{
+         width: width,
+         flex: 'none'
+       }"
+       @click.stop>
+    <ShadcnSelect v-model="selectValue"
+                  :options="options"
+                  :placeholder="placeholder"
+                  @on-change="handleBlur">
+    </ShadcnSelect>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch } from 'vue'
+import ShadcnSelect from '@/ui/select'
+
+interface SelectOption
+{
+  label: string
+  value: any
+}
+
+const props = defineProps<{
+  value: any
+  width: string
+  options: SelectOption[]
+  placeholder?: string
+}>()
+
+const emit = defineEmits<{
+  'save': [value: any]
+  'cancel': []
+}>()
+
+const selectValue = ref(props.value)
+
+// 监听外部value变化
+watch(() => props.value, (newValue) => {
+  selectValue.value = newValue
+})
+
+const handleBlur = () => {
+  if (selectValue.value !== props.value) {
+    console.log(selectValue.value)
+    emit('save', selectValue.value)
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/ui/data-table/components/TableBody.vue b/src/ui/data-table/components/TableBody.vue
index 97b0b646..ee0f45dd 100644
--- a/src/ui/data-table/components/TableBody.vue
+++ b/src/ui/data-table/components/TableBody.vue
@@ -35,14 +35,21 @@
       </div>
 
       <template v-for="col in columns" :key="col.key">
-        <TableCell v-if="col.editable && editableState.isEditing(rowIndex, col.key)"
+        <component :is="col.cellEditor"
+                   v-if="col.cellEditor && col.editable && editableState.isEditing(rowIndex, col.key)"
+                   :align="col.align"
+                   :value="row[col.key]"
+                   :width="calcSize(col.width || 150)"
+                   v-bind="col.cellEditorProps"
+                   @cancel="editableState.stopEditing"
+                   @save="handleSaveEdit(rowIndex, col.key, $event, row)"/>
+        <TableCell v-else-if="col.editable && editableState.isEditing(rowIndex, col.key)"
                    :align="col.align"
                    :size="size"
                    :value="row[col.key]"
                    :width="calcSize(col.width || 150)"
                    @cancel="editableState.stopEditing"
                    @save="handleSaveEdit(rowIndex, col.key, $event, row)"/>
-
         <div v-else
              :class="[
                TablePaddingSize[size],
diff --git a/src/ui/data-table/types.ts b/src/ui/data-table/types.ts
index b62f21b3..d7633df0 100644
--- a/src/ui/data-table/types.ts
+++ b/src/ui/data-table/types.ts
@@ -1,4 +1,5 @@
 import { Size } from '@/ui/data-table/size.ts'
+import { Component } from 'vue'
 
 export type SortOrder = 'asc' | 'desc' | null
 export type RowSelectionMode = 'singleRow' | 'multipleRow'
@@ -34,6 +35,8 @@ export interface ColumnProps
     align?: TextAlign
     resizable?: boolean
     editable?: boolean
+    cellEditor?: Component
+    cellEditorProps?: Record<string, any>
 }
 
 export interface DataTableProps

From a1de31ac74fd1e7eaf9da1e7e8dcb2c97fb80f0d Mon Sep 17 00:00:00 2001
From: qianmoQ <shicheng@devlive.org>
Date: Tue, 14 Jan 2025 18:34:05 +0800
Subject: [PATCH 22/27] =?UTF-8?q?=E7=BB=84=E4=BB=B6(=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E8=A1=A8=E6=A0=BC):=20=E4=BF=AE=E5=A4=8D=20hook=20=E8=BF=94?=
 =?UTF-8?q?=E5=9B=9E=E7=B1=BB=E5=9E=8B=E9=94=99=E8=AF=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                                  |  1 +
 src/ui/data-table/components/TableHeader.vue |  4 +--
 src/ui/data-table/hooks/useResize.ts         | 17 ++++++++----
 src/ui/data-table/hooks/useSort.ts           | 29 +++++++++++++++-----
 4 files changed, 36 insertions(+), 15 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index ab29b5a2..894ca9c7 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -103,6 +103,7 @@ const handleResizable = (column: any, width: number) => {
   console.log(`调整了 ${ column.label } 列的宽度为 ${ width }`)
 }
 
+// @ts-ignore
 const onCellEdit = (value: any) => proxy?.$Message.success({
   content: `编辑的列 [ ${ value.key } ] 的值为 [ ${ value.value } ]`,
   showIcon: true
diff --git a/src/ui/data-table/components/TableHeader.vue b/src/ui/data-table/components/TableHeader.vue
index 62d72a1e..173b8949 100644
--- a/src/ui/data-table/components/TableHeader.vue
+++ b/src/ui/data-table/components/TableHeader.vue
@@ -131,7 +131,5 @@ const handleSort = (column: ColumnProps, event: MouseEvent) => {
   emits('on-sort', column, event)
 }
 
-const { handleMouseDown } = useResize((_event, column, width) => {
-  emits('on-resizable', column, width)
-})
+const { handleMouseDown } = useResize(emits)
 </script>
\ No newline at end of file
diff --git a/src/ui/data-table/hooks/useResize.ts b/src/ui/data-table/hooks/useResize.ts
index ba2d7637..31958b96 100644
--- a/src/ui/data-table/hooks/useResize.ts
+++ b/src/ui/data-table/hooks/useResize.ts
@@ -1,8 +1,15 @@
-import { onUnmounted, ref } from 'vue'
-import type { ColumnProps } from '../types'
+import { onUnmounted, Ref, ref } from 'vue'
+import { ColumnProps, DataTableHeaderEmits } from '../types'
 import { calcSize } from '@/utils/common.ts'
 
-export function useResize(emit: (event: 'on-resizable', column: ColumnProps, width: number) => void)
+interface UseResizeReturn
+{
+    isResizing: Ref<boolean>
+    currentColumn: Ref<ColumnProps | null>
+    handleMouseDown: (e: MouseEvent, column: ColumnProps) => void
+}
+
+export function useResize(emits: DataTableHeaderEmits): UseResizeReturn
 {
     const isResizing = ref(false)
     const currentColumn = ref<ColumnProps | null>(null)
@@ -56,14 +63,14 @@ export function useResize(emit: (event: 'on-resizable', column: ColumnProps, wid
             }
 
             // 触发 on-resizable 事件
-            emit('on-resizable', currentColumn.value, newWidth)
+            emits('on-resizable', currentColumn.value, newWidth)
         }
     }
 
     const handleMouseUp = () => {
         if (currentColumn.value) {
             // 在松开鼠标时也触发一次事件，标记调整结束
-            emit('on-resizable', currentColumn.value, parseInt(currentColumn.value.width || '150'))
+            emits('on-resizable', currentColumn.value, parseInt(currentColumn.value.width || '150'))
         }
 
         isResizing.value = false
diff --git a/src/ui/data-table/hooks/useSort.ts b/src/ui/data-table/hooks/useSort.ts
index edf244b2..e66bf7fa 100644
--- a/src/ui/data-table/hooks/useSort.ts
+++ b/src/ui/data-table/hooks/useSort.ts
@@ -1,13 +1,28 @@
-import { ref } from 'vue'
-import type { ColumnProps } from '../types'
+import { ref, Ref } from 'vue'
+import type { ColumnProps, SortOrder } from '../types'
 
-export const useSort = (initialColumns: ColumnProps[]) => {
-    const columns = ref(initialColumns)
+// 定义返回类型接口
+interface UseSortReturn
+{
+    columns: Ref<ColumnProps[]>
+    toggleSort: (key: string, event?: MouseEvent) => ColumnProps[]
+    getSortedColumns: () => ColumnProps[]
+}
 
-    const toggleSort = (key: string, event?: MouseEvent) => {
+interface SortableColumnProps
+    extends ColumnProps
+{
+    sort?: SortOrder
+    sortable?: boolean
+}
+
+export const useSort = (initialColumns: ColumnProps[]): UseSortReturn => {
+    const columns = ref<SortableColumnProps[]>(initialColumns as SortableColumnProps[])
+
+    const toggleSort = (key: string, event?: MouseEvent): ColumnProps[] => {
         const column = columns.value.find(col => col.key === key)
         if (!column || !column.sortable) {
-            return
+            return []
         }
 
         // 多列排序需要按住 Shift 键
@@ -37,7 +52,7 @@ export const useSort = (initialColumns: ColumnProps[]) => {
     }
 
     // 获取当前所有排序列
-    const getSortedColumns = () => {
+    const getSortedColumns = (): ColumnProps[] => {
         return columns.value.filter(col => col.sort)
     }
 

From bee3c3655ef42b4168638143edddf122aaf099b8 Mon Sep 17 00:00:00 2001
From: qianmoQ <shicheng@devlive.org>
Date: Tue, 14 Jan 2025 22:44:44 +0800
Subject: [PATCH 23/27] =?UTF-8?q?=E7=BB=84=E4=BB=B6(=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E8=A1=A8=E6=A0=BC):=20=E6=94=AF=E6=8C=81=E5=8F=B3=E9=94=AE?=
 =?UTF-8?q?=E8=8F=9C=E5=8D=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/components/data/data-table.md            |  19 ++++
 packages/index.ts                             |   6 +-
 src/App.vue                                   |  14 ++-
 src/locales/en-US.ts                          |   2 +
 src/locales/zh-CN.ts                          |   2 +
 src/ui/data-table/ShadcnDataTable.vue         |   4 +-
 src/ui/data-table/components/TableBody.vue    |  62 ++++++++---
 ...TableCell.vue => TableCellInputEditor.vue} |  22 +++-
 .../components/TableCellSelectEditor.vue}     |  19 +++-
 .../components/TableContextMenu.vue           | 103 ++++++++++++++++++
 src/ui/data-table/hooks/useContextMenu.ts     |  81 ++++++++++++++
 src/ui/data-table/hooks/useEditable.ts        |  66 +++++++++--
 src/ui/data-table/index.ts                    |   4 +-
 src/ui/data-table/types.ts                    |   6 +-
 14 files changed, 366 insertions(+), 44 deletions(-)
 rename src/ui/data-table/components/{TableCell.vue => TableCellInputEditor.vue} (53%)
 rename src/{SelectEditor.vue => ui/data-table/components/TableCellSelectEditor.vue} (60%)
 create mode 100644 src/ui/data-table/components/TableContextMenu.vue
 create mode 100644 src/ui/data-table/hooks/useContextMenu.ts

diff --git a/docs/components/data/data-table.md b/docs/components/data/data-table.md
index 3bea9c68..885bbe8a 100644
--- a/docs/components/data/data-table.md
+++ b/docs/components/data/data-table.md
@@ -146,6 +146,17 @@ title: 数据表格 (Data Table)
 
 :::
 
+## 右键菜单 (contextMenu)
+
+::: raw
+
+<CodeRunner title="右键菜单 (contextMenu)" codeKey="data-table-contextmenu">
+    <ShadcnDataTable :columns="editableColumns" :data="data" :context-menu="true" @on-row-edit="onRowEdit">
+    </ShadcnDataTable>
+</CodeRunner>
+
+:::
+
 ## 行选择 (selection)
 
 ::: raw
@@ -277,6 +288,7 @@ title: 数据表格 (Data Table)
         ['rowSelection', '行选择方式', 'enum', '-', 'singleRow | multipleRow'],
         ['loading', '是否显示加载中', 'boolean', 'false', '-'],
         ['columnMove', '是否允许列移动位置', 'boolean', 'false', '-'],
+        ['contextMenu', '是否允许右键菜单', 'boolean', 'false', '-'],
     ]">
 </ApiTable>
 
@@ -323,6 +335,8 @@ title: 数据表格 (Data Table)
         ['on-size-change', '当分页尺寸发生变化时触发', '当前分页尺寸'],
         ['on-row-select', '当行被选中时触发', '行索引，当前行数据，是否选中，选中的行数据'],
         ['on-column-move', '当列被移动时触发', '移动后的列列表'],
+        ['on-cell-edit', '当单元格被编辑时触发', '行索引，列的 key 值，行数据'],
+        ['on-row-edit', '当行被编辑时触发', '行索引，行数据'],
     ]">
 </ApiTable>
 
@@ -460,4 +474,9 @@ const onCellEdit = (value: any) => proxy?.$Message.success({
     content: `编辑的列 [ ${value.key} ] 的值为 [ ${ value.value } ]`,
     showIcon: true
 })
+
+const onRowEdit = (value: any) => proxy?.$Message.success({
+  content: `编辑的行 [ ${ value.rowIndex } ] 的值为 [ ${ JSON.stringify(value.values) } ]`,
+  showIcon: true
+})
 </script>
\ No newline at end of file
diff --git a/packages/index.ts b/packages/index.ts
index c7bf38c6..ef05b3ac 100644
--- a/packages/index.ts
+++ b/packages/index.ts
@@ -99,7 +99,7 @@ import { ShadcnContribution } from '@/ui/contribution'
 import { ShadcnMention } from '@/ui/mention'
 import { ShadcnImage, ShadcnImageGroup, ShadcnImageViewer } from '@/ui/image'
 import { ShadcnCarousel } from '@/ui/carousel'
-import { ShadcnDataTable } from '@/ui/data-table'
+import { ShadcnDataTable, TableCellInputEditor, TableCellSelectEditor } from '@/ui/data-table'
 
 let components = [
     ShadcnButton,
@@ -196,7 +196,7 @@ let components = [
     ShadcnMention,
     ShadcnImage, ShadcnImageGroup, ShadcnImageViewer,
     ShadcnCarousel,
-    ShadcnDataTable
+    ShadcnDataTable, TableCellInputEditor, TableCellSelectEditor
 ]
 
 interface InstallOptions
@@ -328,7 +328,7 @@ export { ShadcnContribution } from '@/ui/contribution'
 export { ShadcnMention } from '@/ui/mention'
 export { ShadcnImage, ShadcnImageGroup, ShadcnImageViewer } from '@/ui/image'
 export { ShadcnCarousel } from '@/ui/carousel'
-export { ShadcnDataTable } from '@/ui/data-table'
+export { ShadcnDataTable, TableCellInputEditor, TableCellSelectEditor } from '@/ui/data-table'
 
 // Export functions
 export { fnToString, fnToFunction } from '@/utils/formatter'
diff --git a/src/App.vue b/src/App.vue
index 894ca9c7..aaf1ff8f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -6,13 +6,15 @@
                      row-selection="multipleRow"
                      :pagination="{ size: 20, options: [5, 10, 20, 50, 100] }"
                      :column-move="true"
+                     :context-menu="true"
                      @on-cell-click="handleCellClick"
                      @on-resizable="handleResizable"
                      @on-page-change="console.log('页码改变' + $event)"
                      @on-size-change="console.log('每页条数改变' + $event)"
                      @on-row-select="console.log('选中的数据条数 ' + $event?.selectedRows.length)"
                      @on-column-move="console.log('列移动 ' + JSON.stringify($event))"
-                     @on-cell-edit="onCellEdit">
+                     @on-cell-edit="onCellEdit"
+                     @on-row-edit="onRowEdit">
     </ShadcnDataTable>
   </div>
 </template>
@@ -20,7 +22,7 @@
 <script setup lang="ts">
 import { getCurrentInstance, ref } from 'vue'
 import { setLocale } from '@/utils/locale.ts'
-import SelectEditor from '@/SelectEditor.vue'
+import TableCellSelectEditor from '@/ui/data-table/components/TableCellSelectEditor.vue'
 
 setLocale('zh-CN')
 
@@ -29,7 +31,7 @@ const { proxy } = getCurrentInstance()!
 const columns = ref([
   { key: 'index', label: '#', sortable: true, width: 50, align: 'center' },
   {
-    key: 'title', label: '标题', editable: true, cellEditor: SelectEditor,
+    key: 'title', label: '标题', editable: true, cellEditor: TableCellSelectEditor,
     cellEditorProps: {
       options: [
         { label: 'Active', value: 'active' },
@@ -108,4 +110,10 @@ const onCellEdit = (value: any) => proxy?.$Message.success({
   content: `编辑的列 [ ${ value.key } ] 的值为 [ ${ value.value } ]`,
   showIcon: true
 })
+
+// @ts-ignore
+const onRowEdit = (value: any) => proxy?.$Message.success({
+  content: `编辑的行 [ ${ value.rowIndex } ] 的值为 [ ${ JSON.stringify(value.values) } ]`,
+  showIcon: true
+})
 </script>
\ No newline at end of file
diff --git a/src/locales/en-US.ts b/src/locales/en-US.ts
index 067f065b..f687c9e5 100644
--- a/src/locales/en-US.ts
+++ b/src/locales/en-US.ts
@@ -322,6 +322,8 @@ export default {
     dataTable: {
         text: {
             pageSize: 'Page size',
+            editCell: 'Edit cell',
+            editRow: 'Edit the entire line'
         }
     }
 }
\ No newline at end of file
diff --git a/src/locales/zh-CN.ts b/src/locales/zh-CN.ts
index 3dbeb18e..63a9ebcb 100644
--- a/src/locales/zh-CN.ts
+++ b/src/locales/zh-CN.ts
@@ -322,6 +322,8 @@ export default {
     dataTable: {
         text: {
             pageSize: '每页显示',
+            editCell: '编辑单元格',
+            editRow: '编辑整行'
         }
     }
 }
\ No newline at end of file
diff --git a/src/ui/data-table/ShadcnDataTable.vue b/src/ui/data-table/ShadcnDataTable.vue
index 9dfa66b7..6cb8e061 100644
--- a/src/ui/data-table/ShadcnDataTable.vue
+++ b/src/ui/data-table/ShadcnDataTable.vue
@@ -22,9 +22,11 @@
                    :row-selection="rowSelection"
                    :selection-state="selectionState"
                    :loading="loading"
+                   :context-menu="contextMenu"
                    @on-cell-click="(payload) => emits('on-cell-click', payload as any)"
                    @on-row-select="(payload) => emits('on-row-select', payload as any)"
-                   @on-cell-edit="(payload) => emits('on-cell-edit', payload as any)">
+                   @on-cell-edit="(payload) => emits('on-cell-edit', payload as any)"
+                   @on-row-edit="(payload) => emits('on-row-edit', payload as any)">
           <template #loading>
             <slot name="loading">
               <div class="m-6">
diff --git a/src/ui/data-table/components/TableBody.vue b/src/ui/data-table/components/TableBody.vue
index ee0f45dd..a52e0e04 100644
--- a/src/ui/data-table/components/TableBody.vue
+++ b/src/ui/data-table/components/TableBody.vue
@@ -37,19 +37,22 @@
       <template v-for="col in columns" :key="col.key">
         <component :is="col.cellEditor"
                    v-if="col.cellEditor && col.editable && editableState.isEditing(rowIndex, col.key)"
-                   :align="col.align"
+                   :field-key="col.key"
                    :value="row[col.key]"
                    :width="calcSize(col.width || 150)"
+                   :is-row-editing="!!editableState.editingRowState.value"
+                   :on-row-value-change="editableState.updateRowValue"
                    v-bind="col.cellEditorProps"
                    @cancel="editableState.stopEditing"
-                   @save="handleSaveEdit(rowIndex, col.key, $event, row)"/>
-        <TableCell v-else-if="col.editable && editableState.isEditing(rowIndex, col.key)"
-                   :align="col.align"
-                   :size="size"
-                   :value="row[col.key]"
-                   :width="calcSize(col.width || 150)"
-                   @cancel="editableState.stopEditing"
-                   @save="handleSaveEdit(rowIndex, col.key, $event, row)"/>
+                   @save="handleSaveEdit(rowIndex, col.key, $event, row, col)"/>
+        <TableCellInputEditor v-else-if="col.editable && editableState.isEditing(rowIndex, col.key)"
+                              :field-key="col.key"
+                              :is-row-editing="!!editableState.editingRowState.value"
+                              :on-row-value-change="editableState.updateRowValue"
+                              :value="row[col.key]"
+                              :width="calcSize(col.width || 150)"
+                              @cancel="editableState.stopEditing"
+                              @save="handleSaveEdit(rowIndex, col.key, $event, row, col)"/>
         <div v-else
              :class="[
                TablePaddingSize[size],
@@ -64,7 +67,8 @@
              @mousemove.stop.prevent="(col.ellipsis !== false && col.tooltip) && showTooltip($event, row[col.key])"
              @mouseleave.stop.prevent="hideTooltip"
              @click.stop="handleCellClick(rowIndex, col.key, row)"
-             @dblclick.stop="handleCellDblClick(rowIndex, col.key, row, col)">
+             @dblclick.stop="handleCellDblClick(rowIndex, col.key, row, col)"
+             @contextmenu.prevent="props.contextMenu && contextMenuState.show($event, rowIndex, col.key, row, col)">
           {{ row[col.key] }}
         </div>
       </template>
@@ -74,10 +78,17 @@
       <slot name="empty"/>
     </div>
   </div>
+
+  <TableContextMenu v-if="props.contextMenu"
+                    v-show="contextMenuState.visible.value"
+                    :context-menu-state="contextMenuState"
+                    :editable-state="editableState"
+                    @on-row-edit="(val) => handleSaveRowEdit(val)">>
+  </TableContextMenu>
 </template>
 
 <script setup lang="ts">
-import { CellClickPayload, ColumnProps, DataTableBodyEmits, RowSelectionMode, TextAlign } from '../types'
+import { CellClickPayload, ColumnProps, DataTableBodyEmits, RowPayload, RowSelectionMode, TextAlign } from '../types'
 import { BaseSize } from '@/ui/common/size'
 import { Size, TablePaddingSize } from '../size'
 import { onMounted, onUnmounted, ref } from 'vue'
@@ -85,7 +96,9 @@ import { useTooltip } from '../hooks/useTooltip'
 import { calcSize } from '@/utils/common'
 import { useRowSelection } from '../hooks/useRowSelection'
 import { useEditable } from '../hooks/useEditable'
-import TableCell from '@/ui/data-table/components/TableCell.vue'
+import { useContextMenu } from '../hooks/useContextMenu'
+import TableCellInputEditor from '@/ui/data-table/components/TableCellInputEditor.vue'
+import TableContextMenu from '@/ui/data-table/components/TableContextMenu.vue'
 
 const props = withDefaults(defineProps<{
   columns: ColumnProps[]
@@ -94,9 +107,11 @@ const props = withDefaults(defineProps<{
   rowSelection?: RowSelectionMode
   selectionState: ReturnType<typeof useRowSelection>
   loading?: boolean
+  contextMenu?: boolean
 }>(), {
   size: 'default',
-  loading: false
+  loading: false,
+  contextMenu: false
 })
 
 const emits = defineEmits<DataTableBodyEmits>()
@@ -105,15 +120,27 @@ const tableRef = ref<HTMLElement | null>(null)
 const selectedCell = ref<CellClickPayload>(null)
 
 const editableState = useEditable()
+const contextMenuState = useContextMenu()
 
-const handleSaveEdit = (_rowIndex: number, _key: string, value: any, row: any) => {
+const handleSaveEdit = (_rowIndex: number, _key: string, value: any, row: any, col: ColumnProps) => {
   const lastEditState = editableState.stopEditing(value)
   if (lastEditState) {
     emits('on-cell-edit', {
       rowIndex: lastEditState.rowIndex,
       key: lastEditState.key,
       value: lastEditState.value,
-      row: row
+      row: row,
+      col: col
+    })
+  }
+}
+
+const handleSaveRowEdit = (lastEditState: RowPayload) => {
+  if (lastEditState) {
+    emits('on-row-edit', {
+      rowIndex: lastEditState.rowIndex,
+      row: lastEditState.row,
+      values: lastEditState.values
     })
   }
 }
@@ -131,7 +158,7 @@ const handleCellClick = (rowIndex: number, col: string, row: any) => {
 
 const handleCellDblClick = (rowIndex: number, key: string, row: any, column: ColumnProps) => {
   if (column.editable) {
-    editableState.startEditing(rowIndex, key, row[key], column)
+    editableState.startEditing(rowIndex, key, row[key], column, column)
   }
 }
 
@@ -143,7 +170,8 @@ const clearSelectedCell = () => {
       rowIndex: lastEditState.rowIndex,
       key: lastEditState.key,
       value: lastEditState.value,
-      row: lastEditState.row
+      row: lastEditState.row,
+      col: lastEditState.col
     })
   }
 }
diff --git a/src/ui/data-table/components/TableCell.vue b/src/ui/data-table/components/TableCellInputEditor.vue
similarity index 53%
rename from src/ui/data-table/components/TableCell.vue
rename to src/ui/data-table/components/TableCellInputEditor.vue
index adddc19c..f406012d 100644
--- a/src/ui/data-table/components/TableCell.vue
+++ b/src/ui/data-table/components/TableCellInputEditor.vue
@@ -1,7 +1,7 @@
 <template>
   <div :style="{ width: calcSize(width) }">
     <ShadcnInput v-model="inputValue"
-                 @blur="handleBlur"
+                 @on-blur="handleBlur"
                  @keydown.enter="handleBlur"
                  @keydown.esc="handleCancel">
     </ShadcnInput>
@@ -9,15 +9,16 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue'
-import { TextAlign } from '../types'
+import { ref, watch } from 'vue'
 import ShadcnInput from '@/ui/input'
 import { calcSize } from '@/utils/common.ts'
 
 const props = defineProps<{
   value: any
-  align?: TextAlign
   width: string
+  isRowEditing?: boolean
+  fieldKey?: string
+  onRowValueChange?: (key: string, value: any) => void
 }>()
 
 const emit = defineEmits<{
@@ -27,8 +28,19 @@ const emit = defineEmits<{
 
 const inputValue = ref(props.value)
 
+watch(() => props.value, (newValue) => {
+  inputValue.value = newValue
+})
+
 const handleBlur = () => {
-  emit('save', inputValue.value)
+  if (props.isRowEditing && props.fieldKey && props.onRowValueChange) {
+    // 行编辑模式：更新行编辑状态
+    props.onRowValueChange(props.fieldKey, inputValue.value)
+  }
+  else {
+    // 单元格编辑模式：直接保存
+    emit('save', inputValue.value)
+  }
 }
 
 const handleCancel = () => {
diff --git a/src/SelectEditor.vue b/src/ui/data-table/components/TableCellSelectEditor.vue
similarity index 60%
rename from src/SelectEditor.vue
rename to src/ui/data-table/components/TableCellSelectEditor.vue
index e4b22a45..a0fec929 100644
--- a/src/SelectEditor.vue
+++ b/src/ui/data-table/components/TableCellSelectEditor.vue
@@ -7,7 +7,7 @@
     <ShadcnSelect v-model="selectValue"
                   :options="options"
                   :placeholder="placeholder"
-                  @on-change="handleBlur">
+                  @on-change="handleChange">
     </ShadcnSelect>
   </div>
 </template>
@@ -27,6 +27,9 @@ const props = defineProps<{
   width: string
   options: SelectOption[]
   placeholder?: string
+  isRowEditing?: boolean
+  fieldKey?: string
+  onRowValueChange?: (key: string, value: any) => void
 }>()
 
 const emit = defineEmits<{
@@ -41,10 +44,16 @@ watch(() => props.value, (newValue) => {
   selectValue.value = newValue
 })
 
-const handleBlur = () => {
-  if (selectValue.value !== props.value) {
-    console.log(selectValue.value)
-    emit('save', selectValue.value)
+const handleChange = () => {
+  if (props.isRowEditing && props.fieldKey && props.onRowValueChange) {
+    // 行编辑模式：更新行编辑状态
+    props.onRowValueChange(props.fieldKey, selectValue.value)
+  }
+  else {
+    // 单元格编辑模式：直接保存
+    if (selectValue.value !== props.value) {
+      emit('save', selectValue.value)
+    }
   }
 }
 </script>
\ No newline at end of file
diff --git a/src/ui/data-table/components/TableContextMenu.vue b/src/ui/data-table/components/TableContextMenu.vue
new file mode 100644
index 00000000..f9ecb760
--- /dev/null
+++ b/src/ui/data-table/components/TableContextMenu.vue
@@ -0,0 +1,103 @@
+<template>
+  <ShadcnContextMenu v-model="localVisible" :position="contextMenuState.position.value">
+    <ShadcnContextMenuItem
+        :disabled="!contextMenuState.selectedValue.value?.col.editable"
+        @click="onItemClick('edit-cell')">
+      {{ t('dataTable.text.editCell') }}
+    </ShadcnContextMenuItem>
+    <ShadcnContextMenuItem @click="onItemClick('edit-row')">
+      {{ t('dataTable.text.editRow') }}
+    </ShadcnContextMenuItem>
+  </ShadcnContextMenu>
+
+  <div v-if="editableState.editingRowState.value"
+       :style="{
+         position: 'fixed',
+         left: `${calcSize(menuPosition.x)}`,
+         top: `${calcSize(menuPosition.y)}`
+       }"
+       class="space-x-2">
+    <ShadcnButtonGroup size="small">
+      <ShadcnButton type="error" circle @click="onCancelRowEdit">
+        <ShadcnIcon icon="X" size="15"/>
+      </ShadcnButton>
+      <ShadcnButton type="success" circle @click="onSaveRowEdit">
+        <ShadcnIcon icon="Check" size="15"/>
+      </ShadcnButton>
+    </ShadcnButtonGroup>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { t } from '@/utils/locale'
+import { ShadcnContextMenu, ShadcnContextMenuItem } from '@/ui/contextmenu'
+import ShadcnButton from '@/ui/button'
+import { computed, ref, watch } from 'vue'
+import { useEditable } from '../hooks/useEditable'
+import { CellPayload } from '../types'
+import { calcSize } from '@/utils/common.ts'
+import ShadcnIcon from '@/ui/icon'
+
+const props = defineProps<{
+  contextMenuState: ReturnType<any>
+  editableState: ReturnType<typeof useEditable>
+}>()
+
+const emits = defineEmits(['on-row-edit'])
+
+const currentValue = ref<CellPayload | null>(null)
+const menuPosition = ref({ x: 0, y: 0 })
+
+watch(() => props.contextMenuState.selectedValue.value, (newVal) => {
+  if (newVal) {
+    currentValue.value = { ...newVal }
+  }
+}, { immediate: true })
+
+watch(() => props.contextMenuState.actionsPosition.value, (newVal) => {
+  if (newVal) {
+    menuPosition.value = { ...newVal }
+  }
+}, { immediate: true })
+
+const localVisible = computed({
+  get: () => props.contextMenuState.visible.value,
+  set: (value) => {
+    if (!value) {
+      props.contextMenuState.hide(true)
+    }
+  }
+})
+
+const onItemClick = (action: string) => {
+  const selectedValue = currentValue.value
+  if (!selectedValue) {
+    return
+  }
+
+  switch (action) {
+    case 'edit-cell':
+      const { rowIndex, key, value, row, col } = selectedValue
+      props.editableState.startEditing(rowIndex, key, value, row, col)
+      props.contextMenuState.hide(false)
+      break
+
+    case 'edit-row':
+      const { rowIndex: rowIdx, row: rowData } = selectedValue
+      props.editableState.startRowEditing(rowIdx, { ...rowData })
+      props.contextMenuState.hide(true)
+      break
+  }
+}
+
+const onSaveRowEdit = () => {
+  const lastEditState = props.editableState.stopRowEditing()
+  if (lastEditState) {
+    emits('on-row-edit', lastEditState)
+  }
+}
+
+const onCancelRowEdit = () => {
+  props.editableState.stopRowEditing()
+}
+</script>
\ No newline at end of file
diff --git a/src/ui/data-table/hooks/useContextMenu.ts b/src/ui/data-table/hooks/useContextMenu.ts
new file mode 100644
index 00000000..a2db6ef7
--- /dev/null
+++ b/src/ui/data-table/hooks/useContextMenu.ts
@@ -0,0 +1,81 @@
+import { ref, Ref } from 'vue'
+import { CellPayload, ColumnProps } from '../types'
+
+export interface ContextMenuPosition
+{
+    x: number
+    y: number
+}
+
+export interface UseContextMenuReturn
+{
+    visible: Ref<boolean>
+    position: Ref<ContextMenuPosition>
+    actionsPosition: Ref<ContextMenuPosition>
+    selectedValue: Ref<CellPayload | null>
+    show: (event: MouseEvent, rowIndex: number, key: string, row: any, col: ColumnProps) => void
+    hide: (keepState?: boolean) => void
+    isVisible: () => boolean
+}
+
+export const useContextMenu = (): UseContextMenuReturn => {
+    const visible = ref(false)
+    const position = ref<ContextMenuPosition>({ x: 0, y: 0 })
+    const actionsPosition = ref<ContextMenuPosition>({ x: 0, y: 0 })
+    const selectedCell = ref<CellPayload | null>(null)
+
+    const show = (event: MouseEvent, rowIndex: number, key: string, row: any, col: ColumnProps) => {
+        event.preventDefault()
+
+        const x = event.clientX
+        const y = event.clientY
+        position.value = { x, y }
+
+        const target = event.target as HTMLElement
+        const rect = target.getBoundingClientRect()
+        actionsPosition.value = {
+            x: rect.left,
+            y: rect.bottom
+        }
+
+        selectedCell.value = { rowIndex, key, value: row[key], row, col }
+        visible.value = true
+
+        const hideOnClickOutside = (e: MouseEvent) => {
+            const target = e.target as HTMLElement
+            const contextMenu = document.querySelector('.context-menu')
+
+            if (contextMenu && !contextMenu.contains(target)) {
+                hide(true)
+                document.removeEventListener('click', hideOnClickOutside)
+            }
+        }
+
+        setTimeout(() => {
+            document.addEventListener('click', hideOnClickOutside)
+        }, 0)
+    }
+
+    const hide = (keepState = false) => {
+        visible.value = false
+
+        if (!keepState) {
+            position.value = { x: 0, y: 0 }
+            selectedCell.value = null
+        }
+    }
+
+    const isVisible = (): boolean => {
+        return visible.value
+    }
+
+    return {
+        visible,
+        position,
+        actionsPosition,
+        selectedValue: selectedCell,
+        show,
+        hide,
+        isVisible
+    }
+}
\ No newline at end of file
diff --git a/src/ui/data-table/hooks/useEditable.ts b/src/ui/data-table/hooks/useEditable.ts
index 94a2b8b4..44a85e7a 100644
--- a/src/ui/data-table/hooks/useEditable.ts
+++ b/src/ui/data-table/hooks/useEditable.ts
@@ -1,20 +1,36 @@
 import { ref, Ref } from 'vue'
-import { CellPayload } from '../types.ts'
+import { CellPayload, ColumnProps, RowPayload } from '../types.ts'
 
 export interface UseEditableReturn
 {
     editingCell: Ref<CellPayload | null>
-    startEditing: (rowIndex: number, key: string, value: any, row: any) => void
-    stopEditing: (value?: any) => CellPayload | null  // 返回最后的编辑状态
+    editingRowState: Ref<RowPayload | null>
+    startEditing: (rowIndex: number, key: string, value: any, row: any, col: ColumnProps) => void
+    startRowEditing: (rowIndex: number, row: any) => void
+    stopEditing: (value?: any) => CellPayload | null
+    stopRowEditing: () => RowPayload | null
     updateValue: (value: any) => void
+    updateRowValue: (key: string, value: any) => void
     isEditing: (rowIndex: number, key: string) => boolean
+    isRowEditing: (rowIndex: number) => boolean
 }
 
 export const useEditable = (): UseEditableReturn => {
     const editingCell = ref<CellPayload | null>(null)
+    const editingRowState = ref<RowPayload | null>(null)
 
-    const startEditing = (rowIndex: number, key: string, value: any, row: any) => {
-        editingCell.value = { rowIndex, key, value, row }
+    const startEditing = (rowIndex: number, key: string, value: any, row: any, col: ColumnProps) => {
+        editingCell.value = { rowIndex, key, value, row, col }
+        editingRowState.value = null
+    }
+
+    const startRowEditing = (rowIndex: number, row: any) => {
+        editingRowState.value = {
+            rowIndex,
+            row: { ...row }, // 创建原始行数据的深拷贝
+            values: { ...row } // 创建用于编辑的数据副本
+        }
+        editingCell.value = null
     }
 
     const stopEditing = (newValue?: any) => {
@@ -30,24 +46,58 @@ export const useEditable = (): UseEditableReturn => {
         return lastEditState
     }
 
+    const stopRowEditing = () => {
+        if (!editingRowState.value) {
+            return null
+        }
+
+        const { rowIndex, row, values } = editingRowState.value
+
+        // 创建包含最新值的状态
+        const finalState = {
+            rowIndex,
+            row: { ...row }, // 保留原始行数据
+            values: { ...values } // 返回修改后的数据副本
+        }
+
+        // 清除编辑状态
+        editingRowState.value = null
+        return finalState
+    }
+
     const updateValue = (value: any) => {
         if (editingCell.value) {
             editingCell.value.value = value
         }
     }
 
+    const updateRowValue = (key: string, value: any) => {
+        if (editingRowState.value) {
+            editingRowState.value.values[key] = value
+        }
+    }
+
     const isEditing = (rowIndex: number, key: string): boolean => {
         return (
-            editingCell.value?.rowIndex === rowIndex &&
-            editingCell.value?.key === key
+            (editingCell.value?.rowIndex === rowIndex && editingCell.value?.key === key) ||
+            isRowEditing(rowIndex)
         )
     }
 
+    const isRowEditing = (rowIndex: number): boolean => {
+        return editingRowState.value?.rowIndex === rowIndex
+    }
+
     return {
         editingCell,
+        editingRowState,
         startEditing,
+        startRowEditing,
         stopEditing,
+        stopRowEditing,
         updateValue,
-        isEditing
+        updateRowValue,
+        isEditing,
+        isRowEditing
     }
 }
\ No newline at end of file
diff --git a/src/ui/data-table/index.ts b/src/ui/data-table/index.ts
index 456e98f1..fa649650 100644
--- a/src/ui/data-table/index.ts
+++ b/src/ui/data-table/index.ts
@@ -1 +1,3 @@
-export { default as ShadcnDataTable } from './ShadcnDataTable.vue'
\ No newline at end of file
+export { default as ShadcnDataTable } from './ShadcnDataTable.vue'
+export { default as TableCellInputEditor } from './components/TableCellInputEditor.vue'
+export { default as TableCellSelectEditor } from './components/TableCellSelectEditor.vue'
\ No newline at end of file
diff --git a/src/ui/data-table/types.ts b/src/ui/data-table/types.ts
index d7633df0..bc7bb083 100644
--- a/src/ui/data-table/types.ts
+++ b/src/ui/data-table/types.ts
@@ -6,7 +6,8 @@ export type RowSelectionMode = 'singleRow' | 'multipleRow'
 
 export type CellClickPayload = { rowIndex: number; col: string; row: any } | null
 export type RowSelectPayload = { rowIndex: number; row: any, selected: boolean, selectedRows: any[] } | null
-export type CellPayload = { rowIndex: number; key: string; value: any; row: any }
+export type CellPayload = { rowIndex: number; key: string; value: any; row: any, col: ColumnProps }
+export type RowPayload = { rowIndex: number, row: any, values: Record<string, any> }
 
 export enum TextAlign
 {
@@ -50,6 +51,7 @@ export interface DataTableProps
     pagination?: PaginationProps
     rowSelection?: RowSelectionMode
     columnMove?: boolean // 是否允许移动列，移动后可以调整位置
+    contextMenu?: boolean
 }
 
 export type DataTableHeaderEmits = {
@@ -68,12 +70,14 @@ export type DataTableEmits = {
     (e: 'on-row-select', payload: RowSelectPayload): void
     (e: 'on-column-move', columns: ColumnProps[]): void
     (e: 'on-cell-edit', payload: CellPayload): void
+    (e: 'on-row-edit', payload: RowPayload): void
 }
 
 export type DataTableBodyEmits = {
     (e: 'on-cell-click', payload: CellClickPayload): void
     (e: 'on-row-select', payload: RowSelectPayload): void
     (e: 'on-cell-edit', payload: CellPayload): void
+    (e: 'on-row-edit', payload: RowPayload): void
 }
 
 export  type DataTablePaginationEmits = {

From 66c7c1cb40ef6c00f4ec929b3d6aba858f7077e9 Mon Sep 17 00:00:00 2001
From: qianmoQ <shicheng@devlive.org>
Date: Wed, 15 Jan 2025 00:10:31 +0800
Subject: [PATCH 24/27] =?UTF-8?q?=E7=BB=84=E4=BB=B6(=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E8=A1=A8=E6=A0=BC):=20=E6=94=AF=E6=8C=81=E8=87=AA=E5=AE=9A?=
 =?UTF-8?q?=E4=B9=89=E5=8F=B3=E9=94=AE=E8=8F=9C=E5=8D=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/components/data/data-table.md                |  1 +
 src/App.vue                                       |  5 +++++
 src/ui/data-table/ShadcnDataTable.vue             |  9 +++++++++
 src/ui/data-table/components/TableBody.vue        | 10 +++++++++-
 src/ui/data-table/components/TableContextMenu.vue | 10 +++++++++-
 5 files changed, 33 insertions(+), 2 deletions(-)

diff --git a/docs/components/data/data-table.md b/docs/components/data/data-table.md
index 885bbe8a..93d0ff97 100644
--- a/docs/components/data/data-table.md
+++ b/docs/components/data/data-table.md
@@ -347,6 +347,7 @@ title: 数据表格 (Data Table)
     :columns="[
         ['loading', '加载中的插槽', '-'],
         ['empty', '空数据的插槽', '-'],
+        ['contextMenu', '右键菜单的插槽', '{ visible, position, selectedValue, actionsPosition }<br />{菜单是否可见, 当前位置, 选中的值, 操作菜单的位置}'],
     ]">
 </ApiTable>
 
diff --git a/src/App.vue b/src/App.vue
index aaf1ff8f..c89f805e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -15,6 +15,11 @@
                      @on-column-move="console.log('列移动 ' + JSON.stringify($event))"
                      @on-cell-edit="onCellEdit"
                      @on-row-edit="onRowEdit">
+      <template #contextMenu="{ selectedValue }">
+        <ShadcnContextMenuItem>
+          自定义操作 {{ selectedValue.rowIndex }}
+        </ShadcnContextMenuItem>
+      </template>
     </ShadcnDataTable>
   </div>
 </template>
diff --git a/src/ui/data-table/ShadcnDataTable.vue b/src/ui/data-table/ShadcnDataTable.vue
index 6cb8e061..12fba7ef 100644
--- a/src/ui/data-table/ShadcnDataTable.vue
+++ b/src/ui/data-table/ShadcnDataTable.vue
@@ -44,6 +44,15 @@
               </ShadcnEmpty>
             </slot>
           </template>
+
+          <template #contextMenu="slotProps">
+            <slot :actionsPosition="slotProps.actionsPosition"
+                  :position="slotProps.position"
+                  :selectedValue="slotProps.selectedValue"
+                  :visible="slotProps.visible"
+                  name="contextMenu">
+            </slot>
+          </template>
         </TableBody>
       </div>
     </div>
diff --git a/src/ui/data-table/components/TableBody.vue b/src/ui/data-table/components/TableBody.vue
index a52e0e04..f7ecd897 100644
--- a/src/ui/data-table/components/TableBody.vue
+++ b/src/ui/data-table/components/TableBody.vue
@@ -83,7 +83,15 @@
                     v-show="contextMenuState.visible.value"
                     :context-menu-state="contextMenuState"
                     :editable-state="editableState"
-                    @on-row-edit="(val) => handleSaveRowEdit(val)">>
+                    @on-row-edit="(val) => handleSaveRowEdit(val)">
+    <template #contextMenu="contextMenuProps">
+      <slot :actionsPosition="contextMenuProps.actionsPosition"
+            :position="contextMenuProps.position"
+            :selectedValue="contextMenuProps.selectedValue"
+            :visible="contextMenuProps.visible"
+            name="contextMenu">
+      </slot>
+    </template>
   </TableContextMenu>
 </template>
 
diff --git a/src/ui/data-table/components/TableContextMenu.vue b/src/ui/data-table/components/TableContextMenu.vue
index f9ecb760..e84466be 100644
--- a/src/ui/data-table/components/TableContextMenu.vue
+++ b/src/ui/data-table/components/TableContextMenu.vue
@@ -8,6 +8,13 @@
     <ShadcnContextMenuItem @click="onItemClick('edit-row')">
       {{ t('dataTable.text.editRow') }}
     </ShadcnContextMenuItem>
+
+    <slot :actionsPosition="menuPosition"
+          :position="contextMenuState.position.value"
+          :selectedValue="currentValue as any"
+          :visible="localVisible"
+          name="contextMenu">
+    </slot>
   </ShadcnContextMenu>
 
   <div v-if="editableState.editingRowState.value"
@@ -37,9 +44,10 @@ import { useEditable } from '../hooks/useEditable'
 import { CellPayload } from '../types'
 import { calcSize } from '@/utils/common.ts'
 import ShadcnIcon from '@/ui/icon'
+import ShadcnButtonGroup from '@/ui/button/group'
 
 const props = defineProps<{
-  contextMenuState: ReturnType<any>
+  contextMenuState: any
   editableState: ReturnType<typeof useEditable>
 }>()
 

From b3c10797e3f2f1d91638c4a8e1ef77f34aaa3d27 Mon Sep 17 00:00:00 2001
From: qianmoQ <shicheng@devlive.org>
Date: Wed, 15 Jan 2025 09:33:59 +0800
Subject: [PATCH 25/27] =?UTF-8?q?=E7=BB=84=E4=BB=B6(=E8=BE=93=E5=85=A5?=
 =?UTF-8?q?=E6=A1=86):=20=E4=BF=AE=E5=A4=8D=E6=9C=AA=E8=AE=BE=E7=BD=AE=20n?=
 =?UTF-8?q?ame=20=E5=AD=97=E6=AE=B5=E5=AF=BC=E8=87=B4=E6=8E=A7=E5=88=B6?=
 =?UTF-8?q?=E5=8F=B0=E8=AD=A6=E5=91=8A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/components/form/input.md                 | 23 +++++++++++++++-
 packages/index.ts                             |  4 +--
 src/App.vue                                   |  4 +++
 .../components/TableCellInputEditor.vue       |  2 +-
 .../components/TableContextMenu.vue           | 17 ++++++------
 src/ui/input/ShadcnInput.vue                  | 22 ++++------------
 src/ui/input/index.ts                         |  4 +--
 src/ui/input/types.ts                         | 26 +++++++++++++++++++
 .../components/ShadcnWorkflowPanel.vue        |  2 +-
 9 files changed, 70 insertions(+), 34 deletions(-)
 create mode 100644 src/ui/input/types.ts

diff --git a/docs/components/form/input.md b/docs/components/form/input.md
index 58cc6689..1b55012c 100644
--- a/docs/components/form/input.md
+++ b/docs/components/form/input.md
@@ -234,6 +234,21 @@ const input = ref('Hello View Shadcn UI')
 
 :::
 
+## 表单 (form)
+
+::: raw
+
+<CodeRunner title="表单 (form)">
+    <ShadcnForm v-model="formState" @on-submit="onSubmit">
+        <ShadcnFormItem name="value" label="输入数据" :rules="[{ required: true, message: '请输入数据' }]">
+            <ShadcnInput v-model="formState.value" name="value" />
+        </ShadcnFormItem>
+        <ShadcnButton submit>提交</ShadcnButton>
+    </ShadcnForm>
+</CodeRunner>
+
+:::
+
 ## 输入框 (Input) 属性
 
 <ApiTable title="输入框 (Input) 属性"
@@ -277,7 +292,13 @@ const input = ref('Hello View Shadcn UI')
 </ApiTable>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref, getCurrentInstance } from 'vue';
 
 const input = ref('Hello View Shadcn UI')
+
+const { proxy } = getCurrentInstance()! 
+const formState = ref({ value: null })
+const onSubmit = () => {
+    proxy?.$Message.info({content: `提交的数据 ${JSON.stringify(formState.value)}`})
+}
 </script>
\ No newline at end of file
diff --git a/packages/index.ts b/packages/index.ts
index ef05b3ac..4e8e8581 100644
--- a/packages/index.ts
+++ b/packages/index.ts
@@ -9,7 +9,7 @@ import ShadcnButton from '@/ui/button'
 import ShadcnButtonGroup from '@/ui/button/group'
 import ShadcnCard from '@/ui/card'
 import { ShadcnCopy } from '@/ui/copy'
-import ShadcnInput from '@/ui/input'
+import { ShadcnInput } from '@/ui/input'
 import ShadcnIcon from '@/ui/icon'
 import ShadcnModal from '@/ui/modal'
 import ShadcnTooltip from '@/ui/tooltip'
@@ -239,7 +239,7 @@ export { default as ShadcnButtonGroup } from '@/ui/button/group'
 export { default as ShadcnCard } from '@/ui/card'
 export { ShadcnCopy } from '@/ui/copy'
 export { ShadcnCodeEditor } from '@/ui/code-editor'
-export { default as ShadcnInput } from '@/ui/input'
+export { ShadcnInput } from '@/ui/input'
 export { default as ShadcnIcon } from '@/ui/icon'
 export { default as ShadcnModal } from '@/ui/modal'
 export { default as ShadcnTooltip } from '@/ui/tooltip'
diff --git a/src/App.vue b/src/App.vue
index c89f805e..597b89a3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,7 @@
 <template>
   <div class="p-32 space-y-4">
+    <ShadcnInput v-model="input" placeholder="Input" />
+
     <ShadcnDataTable :columns="columns"
                      :data="data"
                      height="300"
@@ -33,6 +35,8 @@ setLocale('zh-CN')
 
 const { proxy } = getCurrentInstance()!
 
+const input = ref('')
+
 const columns = ref([
   { key: 'index', label: '#', sortable: true, width: 50, align: 'center' },
   {
diff --git a/src/ui/data-table/components/TableCellInputEditor.vue b/src/ui/data-table/components/TableCellInputEditor.vue
index f406012d..908d5592 100644
--- a/src/ui/data-table/components/TableCellInputEditor.vue
+++ b/src/ui/data-table/components/TableCellInputEditor.vue
@@ -10,7 +10,7 @@
 
 <script lang="ts" setup>
 import { ref, watch } from 'vue'
-import ShadcnInput from '@/ui/input'
+import { ShadcnInput } from '@/ui/input'
 import { calcSize } from '@/utils/common.ts'
 
 const props = defineProps<{
diff --git a/src/ui/data-table/components/TableContextMenu.vue b/src/ui/data-table/components/TableContextMenu.vue
index e84466be..65365fcc 100644
--- a/src/ui/data-table/components/TableContextMenu.vue
+++ b/src/ui/data-table/components/TableContextMenu.vue
@@ -1,19 +1,18 @@
 <template>
   <ShadcnContextMenu v-model="localVisible" :position="contextMenuState.position.value">
-    <ShadcnContextMenuItem
-        :disabled="!contextMenuState.selectedValue.value?.col.editable"
-        @click="onItemClick('edit-cell')">
-      {{ t('dataTable.text.editCell') }}
-    </ShadcnContextMenuItem>
-    <ShadcnContextMenuItem @click="onItemClick('edit-row')">
-      {{ t('dataTable.text.editRow') }}
-    </ShadcnContextMenuItem>
-
     <slot :actionsPosition="menuPosition"
           :position="contextMenuState.position.value"
           :selectedValue="currentValue as any"
           :visible="localVisible"
           name="contextMenu">
+      <ShadcnContextMenuItem
+          :disabled="!contextMenuState.selectedValue.value?.col.editable"
+          @click="onItemClick('edit-cell')">
+        {{ t('dataTable.text.editCell') }}
+      </ShadcnContextMenuItem>
+      <ShadcnContextMenuItem @click="onItemClick('edit-row')">
+        {{ t('dataTable.text.editRow') }}
+      </ShadcnContextMenuItem>
     </slot>
   </ShadcnContextMenu>
 
diff --git a/src/ui/input/ShadcnInput.vue b/src/ui/input/ShadcnInput.vue
index 80d3e22f..9f05b0b1 100644
--- a/src/ui/input/ShadcnInput.vue
+++ b/src/ui/input/ShadcnInput.vue
@@ -54,23 +54,11 @@ import { computed, inject, nextTick, onMounted, ref, watch } from 'vue'
 import { Size } from '@/ui/enum/Size.ts'
 import ShadcnIcon from '@/ui/icon'
 import { FormItemContext } from '@/ui/form/context.ts'
+import { InputEmits, InputProps } from '@/ui/input/types.ts'
 
-const emit = defineEmits(['on-change', 'on-clear', 'on-blur', 'on-prefix-click', 'on-suffix-click', 'update:modelValue'])
-
-const props = withDefaults(defineProps<{
-  modelValue: string
-  placeholder?: string
-  clearable?: boolean
-  size?: keyof typeof Size
-  wordCount?: boolean
-  maxCount?: number | string
-  disabled?: boolean
-  type?: string
-  rows?: number | string
-  cols?: number | string
-  name?: string
-  readonly?: boolean
-}>(), {
+const emit = defineEmits<InputEmits>()
+
+const props = withDefaults(defineProps<InputProps>(), {
   modelValue: '',
   placeholder: '',
   clearable: false,
@@ -125,7 +113,7 @@ const onInput = (event: Event) => {
   emit('on-change', newValue)
 }
 
-const formItemContext = inject<FormItemContext | null>(`form-item-${ props.name }`)
+const formItemContext = props.name ? inject<FormItemContext | null>(`form-item-${ props.name }`) : null
 
 const onBlur = (event: FocusEvent) => {
   const newValue = (event.target as HTMLInputElement).value
diff --git a/src/ui/input/index.ts b/src/ui/input/index.ts
index 13248a10..be050644 100644
--- a/src/ui/input/index.ts
+++ b/src/ui/input/index.ts
@@ -1,3 +1 @@
-import ShadcnInput from './ShadcnInput.vue'
-
-export default ShadcnInput
+export { default as ShadcnInput } from './ShadcnInput.vue'
\ No newline at end of file
diff --git a/src/ui/input/types.ts b/src/ui/input/types.ts
new file mode 100644
index 00000000..04b565c7
--- /dev/null
+++ b/src/ui/input/types.ts
@@ -0,0 +1,26 @@
+import { Size } from '@/ui/enum/Size.ts'
+
+export interface InputProps
+{
+    modelValue: string
+    placeholder?: string
+    clearable?: boolean
+    size?: keyof typeof Size
+    wordCount?: boolean
+    maxCount?: number | string
+    disabled?: boolean
+    type?: string
+    rows?: number | string
+    cols?: number | string
+    name?: string
+    readonly?: boolean
+}
+
+export type InputEmits = {
+    (e: 'update:modelValue', value: string): void
+    (e: 'on-change', value: string): void
+    (e: 'on-clear'): void
+    (e: 'on-blur', value: string): void
+    (e: 'on-prefix-click'): void
+    (e: 'on-suffix-click'): void
+}
\ No newline at end of file
diff --git a/src/ui/workflow/components/ShadcnWorkflowPanel.vue b/src/ui/workflow/components/ShadcnWorkflowPanel.vue
index c8ca68d3..623b99d0 100644
--- a/src/ui/workflow/components/ShadcnWorkflowPanel.vue
+++ b/src/ui/workflow/components/ShadcnWorkflowPanel.vue
@@ -60,7 +60,7 @@
 <script setup lang="ts">
 import { t } from '@/utils/locale'
 import { WorkflowNode, WorkflowPanelEmits, WorkflowPanelProps, WorkflowPortType } from '../types'
-import ShadcnInput from '@/ui/input'
+import { ShadcnInput } from '@/ui/input'
 import { randomUUID } from '@/utils/uuid.ts'
 import { ref, watch } from 'vue'
 

From d689aff2be2b9955887665b15c2f6d7a20f06897 Mon Sep 17 00:00:00 2001
From: qianmoQ <shicheng@devlive.org>
Date: Wed, 15 Jan 2025 09:58:59 +0800
Subject: [PATCH 26/27] =?UTF-8?q?=E7=BB=84=E4=BB=B6(=E6=95=B0=E5=AD=97?=
 =?UTF-8?q?=E8=BE=93=E5=85=A5=E6=A1=86):=20=E4=BF=AE=E5=A4=8D=E8=A1=A8?=
 =?UTF-8?q?=E5=8D=95=E6=83=85=E5=86=B5=E4=B8=8B=E9=AA=8C=E8=AF=81=E6=97=A0?=
 =?UTF-8?q?=E6=B3=95=E9=80=9A=E8=BF=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/components/form/number.md      | 23 ++++++++++++++++++++++-
 src/App.vue                         | 15 +++++++++++++--
 src/ui/form/context.ts              |  2 +-
 src/ui/form/item/ShadcnFormItem.vue | 21 ++++++++++++++++++---
 src/ui/number/ShadcnNumber.vue      | 14 +++++++-------
 5 files changed, 61 insertions(+), 14 deletions(-)

diff --git a/docs/components/form/number.md b/docs/components/form/number.md
index efad58c2..8c0c0ec4 100644
--- a/docs/components/form/number.md
+++ b/docs/components/form/number.md
@@ -264,6 +264,21 @@ const value = ref(0)
 
 :::
 
+## 表单 (form)
+
+::: raw
+
+<CodeRunner title="表单 (form)">
+    <ShadcnForm v-model="formState" @on-submit="onSubmit">
+        <ShadcnFormItem name="value" label="输入数据" :rules="[{ required: true, message: '请输入数据' }]">
+            <ShadcnNumber v-model="formState.value" name="value" />
+        </ShadcnFormItem>
+        <ShadcnButton submit>提交</ShadcnButton>
+    </ShadcnForm>
+</CodeRunner>
+
+:::
+
 ## 数字输入框 (Number) 属性
 
 <ApiTable title="数字输入框 (Number) 属性"
@@ -304,11 +319,17 @@ const value = ref(0)
 </ApiTable>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, getCurrentInstance } from 'vue'
 
 const basicValue = ref(0)
 const placeholderValue = ref(undefined)
 const minAndMaxValue = ref(0)
 const clearableValue = ref(0)
 const controlValue = ref(null)
+
+const { proxy } = getCurrentInstance()! 
+const formState = ref({ value: null })
+const onSubmit = () => {
+    proxy?.$Message.info({content: `提交的数据 ${JSON.stringify(formState.value)}`})
+}
 </script>
\ No newline at end of file
diff --git a/src/App.vue b/src/App.vue
index 597b89a3..a4d46f0f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,13 @@
 <template>
   <div class="p-32 space-y-4">
-    <ShadcnInput v-model="input" placeholder="Input" />
+    {{formState}}
+    <ShadcnForm v-model="formState" @on-submit="onSubmit">
+      <ShadcnFormItem name="value" label="输入数据" :rules="[{ required: true, message: '请输入数据' }]">
+        <ShadcnNumber v-model="formState.value" name="value" />
+      </ShadcnFormItem>
+      <ShadcnButton submit>提交</ShadcnButton>
+    </ShadcnForm>
+
 
     <ShadcnDataTable :columns="columns"
                      :data="data"
@@ -35,7 +42,11 @@ setLocale('zh-CN')
 
 const { proxy } = getCurrentInstance()!
 
-const input = ref('')
+const formState = ref({ value: null })
+const onSubmit = () => {
+  // @ts-ignore
+  proxy?.$Message.info({content: `提交的数据 ${JSON.stringify(formState.value)}`})
+}
 
 const columns = ref([
   { key: 'index', label: '#', sortable: true, width: 50, align: 'center' },
diff --git a/src/ui/form/context.ts b/src/ui/form/context.ts
index e7a4fd83..2c64be0a 100644
--- a/src/ui/form/context.ts
+++ b/src/ui/form/context.ts
@@ -2,4 +2,4 @@ export interface FormItemContext
 {
     onBlur: () => void;
     name: string;
-}
+}
\ No newline at end of file
diff --git a/src/ui/form/item/ShadcnFormItem.vue b/src/ui/form/item/ShadcnFormItem.vue
index 82a57551..079add40 100644
--- a/src/ui/form/item/ShadcnFormItem.vue
+++ b/src/ui/form/item/ShadcnFormItem.vue
@@ -31,7 +31,6 @@ import { FormItemContext } from '@/ui/form/context.ts'
 import { FormItemProps } from '@/ui/form/types.ts'
 import ShadcnTooltip from '@/ui/tooltip'
 import ShadcnIcon from '@/ui/icon'
-import { isEmpty } from 'lodash'
 
 const props = withDefaults(defineProps<FormItemProps>(), {
   validateOnBlur: true
@@ -67,6 +66,22 @@ const getValue = (obj: any, path: string) => {
   return obj[path]
 }
 
+const isEmptyValue = (value: any): boolean => {
+  if (value === null || value === undefined || value === '') {
+    return true
+  }
+  if (typeof value === 'number' && Number.isNaN(value)) {
+    return true
+  }
+  if (Array.isArray(value)) {
+    return value.length === 0
+  }
+  if (typeof value === 'object') {
+    return Object.keys(value).length === 0
+  }
+  return false
+}
+
 const validate = async (): Promise<{ isValid: boolean; errorMessage?: string }> => {
   if (!props.rules) {
     return { isValid: true }
@@ -76,7 +91,7 @@ const validate = async (): Promise<{ isValid: boolean; errorMessage?: string }>
 
   for (const rule of props.rules) {
     // Required check
-    if (rule.required && isEmpty(value)) {
+    if (rule.required && isEmptyValue(value)) {
       return {
         isValid: false,
         errorMessage: rule.message || 'This field is required'
@@ -168,4 +183,4 @@ watch(
     () => formContext?.errors?.get(props.name),
     (error) => errorMessage.value = error || ''
 )
-</script>
+</script>
\ No newline at end of file
diff --git a/src/ui/number/ShadcnNumber.vue b/src/ui/number/ShadcnNumber.vue
index 07248cb5..992082b3 100644
--- a/src/ui/number/ShadcnNumber.vue
+++ b/src/ui/number/ShadcnNumber.vue
@@ -18,13 +18,13 @@
              :value="displayValue"
              :disabled="disabled"
              :placeholder="placeholder"
-             @input="onInput"
-             @blur="onBlur"/>
+             @input.stop="onInput"
+             @blur.stop="onBlur"/>
 
       <!-- Clear -->
       <div v-if="clearable && displayValue && hovered"
            class="flex items-center"
-           @click="onClear">
+           @click.stop="onClear">
         <slot name="clear">
           <svg viewBox="0 0 24 24"
                fill="none"
@@ -49,7 +49,7 @@
                     'cursor-not-allowed opacity-50': !validValue || Number(localValue) >= Number(props.max)
                   }
               ]"
-             @click="onAdd">
+             @click.stop="onAdd">
           <slot name="add">
             <svg viewBox="0 0 16 16"
                  fill="none"
@@ -70,7 +70,7 @@
                     'cursor-not-allowed opacity-50': !validValue || Number(localValue) <= Number(props.min)
                   }
              ]"
-             @click="onMinus">
+             @click.stop="onMinus">
           <slot name="minus">
             <svg viewBox="0 0 16 16"
                  fill="none"
@@ -126,7 +126,7 @@ const displayValue = computed(() => {
   return props.formatter ? props.formatter(Number(localValue.value)) : localValue.value
 })
 
-const formItemContext = inject<FormItemContext | null>(`form-item-${ props.name }`, null)
+const formItemContext = props.name ? inject<FormItemContext | null>(`form-item-${ props.name }`) : null
 
 watch(() => props.modelValue, (newValue) => {
   validValue.value = isNumber(newValue)
@@ -211,4 +211,4 @@ const onMinus = () => {
     }
   }
 }
-</script>
+</script>
\ No newline at end of file

From 0faf586084782d100ef2e00ee18032abab469a50 Mon Sep 17 00:00:00 2001
From: qianmoQ <shicheng@devlive.org>
Date: Wed, 15 Jan 2025 10:15:53 +0800
Subject: [PATCH 27/27] =?UTF-8?q?=E7=BB=84=E4=BB=B6(=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E8=A1=A8=E6=A0=BC):=20=E4=BF=AE=E5=A4=8D=E7=BC=96=E8=BE=91?=
 =?UTF-8?q?=E7=8A=B6=E6=80=81=E4=B8=8B=E5=8F=AF=E9=80=89=E6=8B=A9=E8=A1=8C?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                                | 20 --------------------
 src/ui/data-table/components/TableBody.vue |  2 +-
 2 files changed, 1 insertion(+), 21 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index a4d46f0f..aaf1ff8f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,14 +1,5 @@
 <template>
   <div class="p-32 space-y-4">
-    {{formState}}
-    <ShadcnForm v-model="formState" @on-submit="onSubmit">
-      <ShadcnFormItem name="value" label="输入数据" :rules="[{ required: true, message: '请输入数据' }]">
-        <ShadcnNumber v-model="formState.value" name="value" />
-      </ShadcnFormItem>
-      <ShadcnButton submit>提交</ShadcnButton>
-    </ShadcnForm>
-
-
     <ShadcnDataTable :columns="columns"
                      :data="data"
                      height="300"
@@ -24,11 +15,6 @@
                      @on-column-move="console.log('列移动 ' + JSON.stringify($event))"
                      @on-cell-edit="onCellEdit"
                      @on-row-edit="onRowEdit">
-      <template #contextMenu="{ selectedValue }">
-        <ShadcnContextMenuItem>
-          自定义操作 {{ selectedValue.rowIndex }}
-        </ShadcnContextMenuItem>
-      </template>
     </ShadcnDataTable>
   </div>
 </template>
@@ -42,12 +28,6 @@ setLocale('zh-CN')
 
 const { proxy } = getCurrentInstance()!
 
-const formState = ref({ value: null })
-const onSubmit = () => {
-  // @ts-ignore
-  proxy?.$Message.info({content: `提交的数据 ${JSON.stringify(formState.value)}`})
-}
-
 const columns = ref([
   { key: 'index', label: '#', sortable: true, width: 50, align: 'center' },
   {
diff --git a/src/ui/data-table/components/TableBody.vue b/src/ui/data-table/components/TableBody.vue
index f7ecd897..73cc1245 100644
--- a/src/ui/data-table/components/TableBody.vue
+++ b/src/ui/data-table/components/TableBody.vue
@@ -154,7 +154,7 @@ const handleSaveRowEdit = (lastEditState: RowPayload) => {
 }
 
 const handleRowClick = (rowIndex: number, _row: any) => {
-  if (props.rowSelection && editableState.isEditing(rowIndex, _row.key)) {
+  if (props.rowSelection && editableState.isEditing(rowIndex, _row.key) && !editableState.editingRowState.value) {
     props.selectionState.toggleRowSelection(rowIndex)
   }
 }