rayyy-vue-table-components 1.2.8 → 1.2.10

package/README.md

@@ -1,85 +1,160 @@
 # Vue Table Components
 
-基於 Vue 3 + Element Plus 的表格組件庫
+<p align="center">
+  <img src="https://img.shields.io/npm/v/rayyy-vue-table-components.svg" alt="npm version">
+  <img src="https://img.shields.io/npm/dm/rayyy-vue-table-components.svg" alt="npm downloads">
+  <img src="https://img.shields.io/github/license/rayshao/vue-table-components.svg" alt="license">
+  <img src="https://img.shields.io/badge/vue-3.x-brightgreen.svg" alt="vue">
+</p>
 
-## 特性
+基於 Vue 3 + Element Plus 的現代化表格組件庫，提供豐富的表格功能和靈活的自定義選項。
 
-- 🚀 基於 Vue 3 + TypeScript
-- 📦 基於 Element Plus 
-- 🎯 完整的 TypeScript 類型支持
-- 📱 響應式設計
-- 🔧 高度可配置
-- 🎨 靈活的樣式系統 - 支援多種導入方式
-- 🛠️ 現代化的 Sass 模組系統
-- 💡 TypeScript 樣式工具函數
+## ✨ 特性
 
-## 安裝
+- 🚀 **現代化技術棧** - 基於 Vue 3 + TypeScript + Element Plus
+- 📦 **開箱即用** - 提供完整的表格解決方案
+- 🎯 **類型安全** - 完整的 TypeScript 類型定義
+- 📱 **響應式設計** - 適配各種設備尺寸
+- 🔧 **高度可配置** - 靈活的配置選項
+- 🎨 **樣式系統** - 多種樣式導入方式，支援自定義主題
+- 🛠️ **現代化工具** - Sass 模組化 + TypeScript 樣式工具
+- 💡 **豐富組件** - 表格、按鈕、對話框、穿梭框等
+
+## 📦 安裝
+
+使用您喜歡的包管理器安裝：
 
 ```bash
+# npm
 npm install rayyy-vue-table-components
-# 或
+
+# yarn
 yarn add rayyy-vue-table-components
-# 或
+
+# pnpm
 pnpm add rayyy-vue-table-components
 ```
 
-## 樣式導入
+> **注意**: 本組件庫需要 Vue 3.0+ 和 Element Plus 作為對等依賴。
 
-本組件庫提供多種靈活的樣式導入方式，您可以根據項目需求選擇：
+## 🚀 快速開始
+
+### 完整引入
 
-### 方式 1：完整樣式導入（推薦）
+在 `main.ts` 中完整引入所有組件：
 
 ```typescript
-// main.ts
+import { createApp } from 'vue'
+import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
-import 'rayyy-vue-table-components/styles'  // 導入所有組件樣式
+import VueTableComponents from 'rayyy-vue-table-components'
+import 'rayyy-vue-table-components/styles'
+
+import App from './App.vue'
+
+const app = createApp(App)
+
+app.use(ElementPlus)
+app.use(VueTableComponents)
+app.mount('#app')
 ```
 
-或在 CSS/SCSS 文件中：
+### 按需引入
 
-```scss
-// styles.scss
-@import 'element-plus/dist/index.css';
-@import 'rayyy-vue-table-components/styles';
+如果您只想使用部分組件，可以按需引入：
+
+```typescript
+import { createApp } from 'vue'
+import { BaseTable, BaseBtn } from 'rayyy-vue-table-components'
+import 'rayyy-vue-table-components/styles'
+
+import App from './App.vue'
+
+const app = createApp(App)
+
+app.component('BaseTable', BaseTable)
+app.component('BaseBtn', BaseBtn)
+app.mount('#app')
+```
+
+### Hello World
+
+創建您的第一個表格：
+
+```vue
+<template>
+  <BaseTable
+    :data="tableData"
+    :columns="columns"
+    :loading="loading"
+  />
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { BaseTable } from 'rayyy-vue-table-components'
+import type { TableColumn } from 'rayyy-vue-table-components'
+
+interface User {
+  id: number
+  name: string
+  email: string
+}
+
+const loading = ref(false)
+const tableData = ref<User[]>([
+  { id: 1, name: '張三', email: 'zhangsan@example.com' },
+  { id: 2, name: '李四', email: 'lisi@example.com' }
+])
+
+const columns: TableColumn<User>[] = [
+  { prop: 'id', label: 'ID', width: 80 },
+  { prop: 'name', label: '姓名' },
+  { prop: 'email', label: '郵箱' }
+]
+</script>
 ```
 
-### 方式 2：Element Plus 主題自定義
+## 🎨 樣式配置
+
+本組件庫提供多種靈活的樣式導入方式：
+
+### 完整樣式導入（推薦）
+
+```typescript
+// main.ts
+import 'element-plus/dist/index.css'
+import 'rayyy-vue-table-components/styles'
+```
+
+### 自定義主題
 
 ```scss
 // styles.scss
 @import 'element-plus/dist/index.css';
-@import 'rayyy-vue-table-components/styles/element';  // 只導入 Element 主題
+@import 'rayyy-vue-table-components/styles/element';
 ```
 
-### 方式 3：TypeScript 樣式工具（推薦用於動態樣式）
+### TypeScript 樣式工具
 
 ```typescript
-// 導入樣式工具函數
 import { tableStyles, createTableCellClass } from 'rayyy-vue-table-components/utils/styles'
 
-// 在組件中使用
+// 動態生成樣式類
 const cellClass = createTableCellClass({ 
   isDismissed: true, 
   isHeader: false 
 })
 ```
 
-## 使用方法
-
-### 全局註冊
+## 📚 組件示例
 
-```typescript
-import { createApp } from 'vue'
-import VueTableComponents from 'rayyy-vue-table-components'
-
-// 導入樣式（選擇上述任一方式）
-import 'rayyy-vue-table-components/styles'
+### BaseTable - 數據表格
 
-const app = createApp(App)
-app.use(VueTableComponents)
-```
+基礎的數據表格組件，支援排序、選擇、自定義列等功能。
 
-### 按需引入
+<details>
+<summary>基本用法</summary>
 
 ```vue
 <template>
@@ -89,60 +164,13 @@ app.use(VueTableComponents)
     :loading="loading"
     @column-sort-change="handleSortChange"
   />
-  
-  <BaseBtn type="primary" @click="showDialog = true">
-    打開對話框
-  </BaseBtn>
-  
-  <BaseDialog v-model="showDialog" title="確認操作">
-    <p>您確定要執行此操作嗎？</p>
-  </BaseDialog>
-  
-  <!-- TransferDialog 示例 -->
-  <TransferDialog
-    v-model="showTransferDialog"
-    :columns-value="tableColumns"
-    transfer-title="配置表格列"
-    @update:submit="handleColumnSubmit"
-  >
-    <template #list-container="{ columns, clickItemProp, handleItemEvents, handleMousedown }">
-      <draggable :list="columns" item-key="prop" delay="200">
-        <template #item="{ element, index }">
-          <transfer-item
-            :columns-value="element"
-            :columns-index="index"
-            :columns-len="columns.length"
-            :class="{
-              'transfer-active-bg': element.checkActive,
-              'transfer-active-border': clickItemProp === element.prop,
-            }"
-            @mousedown="handleMousedown(element.prop || '')"
-            @update:toTop="handleItemEvents.toTop(index)"
-            @update:toBottom="handleItemEvents.toBottom(index)"
-            @update:toPre="handleItemEvents.toPre(index)"
-            @update:toNext="handleItemEvents.toNext(index)"
-          />
-        </template>
-      </draggable>
-    </template>
-  </TransferDialog>
 </template>
 
 <script setup lang="ts">
-// 方式一：從主模塊導入
-import { BaseTable, BaseBtn, BaseDialog, TransferDialog, TransferItem } from 'rayyy-vue-table-components'
+import { ref } from 'vue'
+import { BaseTable } from 'rayyy-vue-table-components'
 import type { TableColumn, SortChangValue } from 'rayyy-vue-table-components'
 
-// 方式二：單獨導入組件
-import { BaseTable } from 'rayyy-vue-table-components/components'
-import type { TableColumn } from 'rayyy-vue-table-components/types'
-
-// 方式三：單獨導入類型
-import type { SortChangValue } from 'rayyy-vue-table-components/types'
-
-// 方式四：導入樣式工具函數
-import { tableStyles, createTableCellClass } from 'rayyy-vue-table-components/utils/styles'
-
 interface User {
   id: number
   name: string
@@ -150,10 +178,11 @@ interface User {
   age: number
 }
 
-const tableData: User[] = [
-  { id: 1, name: 'John Doe', email: 'john@example.com', age: 30 },
-  { id: 2, name: 'Jane Smith', email: 'jane@example.com', age: 25 }
-]
+const loading = ref(false)
+const tableData = ref<User[]>([
+  { id: 1, name: '張三', email: 'zhangsan@example.com', age: 30 },
+  { id: 2, name: '李四', email: 'lisi@example.com', age: 25 }
+])
 
 const columns: TableColumn<User>[] = [
   { prop: 'id', label: 'ID', width: 80 },
@@ -162,329 +191,406 @@ const columns: TableColumn<User>[] = [
   { prop: 'age', label: '年齡', sortable: true }
 ]
 
-const loading = ref(false)
-
 const handleSortChange = (sortInfo: SortChangValue<User>) => {
   console.log('排序變更:', sortInfo)
 }
+</script>
+```
+</details>
 
-const showTransferDialog = ref(false)
-const tableColumns = ref(columns)
+<details>
+<summary>帶選擇和合計的表格</summary>
 
-const handleColumnSubmit = (newColumns: TableColumn<User>[]) => {
-  tableColumns.value = newColumns
-  showTransferDialog.value = false
+```vue
+<template>
+  <BaseTable
+    :data="tableData"
+    :columns="columns"
+    :show-selection="true"
+    :show-summary="true"
+    :summary-method="summaryMethod"
+    @selection-change="handleSelectionChange"
+  />
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { BaseTable } from 'rayyy-vue-table-components'
+import type { TableColumn } from 'rayyy-vue-table-components'
+
+interface Product {
+  id: number
+  name: string
+  price: number
+  quantity: number
+}
+
+const tableData = ref<Product[]>([
+  { id: 1, name: '產品A', price: 100, quantity: 5 },
+  { id: 2, name: '產品B', price: 200, quantity: 3 }
+])
+
+const columns: TableColumn<Product>[] = [
+  { prop: 'id', label: 'ID', width: 80 },
+  { prop: 'name', label: '產品名稱' },
+  { prop: 'price', label: '單價' },
+  { prop: 'quantity', label: '數量' }
+]
+
+const summaryMethod = ({ columns, data }: any) => {
+  const sums: string[] = []
+  columns.forEach((column: any, index: number) => {
+    if (index === 0) {
+      sums[index] = '總計'
+    } else if (column.property === 'price') {
+      const values = data.map((item: Product) => Number(item.price))
+      sums[index] = values.reduce((prev, curr) => prev + curr, 0).toString()
+    } else if (column.property === 'quantity') {
+      const values = data.map((item: Product) => Number(item.quantity))
+      sums[index] = values.reduce((prev, curr) => prev + curr, 0).toString()
+    } else {
+      sums[index] = ''
+    }
+  })
+  return sums
+}
+
+const handleSelectionChange = (selection: Product[]) => {
+  console.log('選中項:', selection)
 }
 </script>
 ```
+</details>
 
-## TypeScript 類型支持
+### BaseBtn - 按鈕組件
 
-本庫提供完整的 TypeScript 類型定義，包括：
+增強的按鈕組件，支援多種樣式和狀態。
 
-### 組件類型
+<details>
+<summary>基本用法</summary>
 
-```typescript
-import type {
-  // BaseTable 組件類型
-  BaseTableProps,
-  BaseTableEmits,
-  BaseTableInstance,
-  
-  // BaseBtn 組件類型
-  BaseBtnProps,
-  BaseBtnEmits,
-  BaseBtnInstance,
-  
-  // BaseDialog 組件類型
-  BaseDialogProps,
-  BaseDialogEmits,
-  BaseDialogInstance,
-  
-  // 插件類型
-  PluginOptions,
-  VueTableComponentsPlugin
-} from 'rayyy-vue-table-components/types/components'
-```
+```vue
+<template>
+  <div class="button-group">
+    <BaseBtn type="primary" @click="handleClick">主要按鈕</BaseBtn>
+    <BaseBtn type="success" :loading="loading">成功按鈕</BaseBtn>
+    <BaseBtn type="warning" plain>樸素按鈕</BaseBtn>
+    <BaseBtn type="danger" disabled>禁用按鈕</BaseBtn>
+    <BaseBtn type="info" link>文字按鈕</BaseBtn>
+  </div>
+</template>
 
-### 數據類型
+<script setup lang="ts">
+import { ref } from 'vue'
+import { BaseBtn } from 'rayyy-vue-table-components'
 
-```typescript
-import type {
-  TableColumn,
-  SortChangValue,
-  TableListReq,
-  Pager,
-  MenuItemType,
-  QRCodeResult
-} from 'rayyy-vue-table-components/types'
+const loading = ref(false)
+
+const handleClick = () => {
+  loading.value = true
+  setTimeout(() => {
+    loading.value = false
+  }, 2000)
+}
+</script>
+
+<style scoped>
+.button-group {
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+</style>
 ```
+</details>
 
-### 樣式工具類型
+### BaseDialog - 對話框組件
 
-```typescript
-import type {
-  TableStylesType,
-  DataTableConfigType
-} from 'rayyy-vue-table-components/utils/styles'
-
-// 樣式工具函數
-import {
-  tableStyles,        // 預定義表格樣式對象
-  componentStyles,    // 預定義組件樣式對象
-  allComponentStyles, // 完整的樣式對象
-  dataTableConfig,    // 表格配置對象
-  createTableCellClass, // 動態生成表格單元格樣式
-  createTextClass     // 動態生成文字樣式
-} from 'rayyy-vue-table-components/utils/styles'
+靈活的對話框組件，支援多種配置選項。
+
+<details>
+<summary>基本用法</summary>
+
+```vue
+<template>
+  <div>
+    <BaseBtn type="primary" @click="showDialog = true">
+      打開對話框
+    </BaseBtn>
+    
+    <BaseDialog 
+      v-model="showDialog" 
+      title="確認操作"
+      sub-title="此操作將永久刪除該文件，是否繼續？"
+      :is-warning="true"
+      @confirm="handleConfirm"
+      @cancel="handleCancel"
+    >
+      <p>這是對話框的內容區域，您可以放置任何內容。</p>
+    </BaseDialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { BaseBtn, BaseDialog } from 'rayyy-vue-table-components'
+
+const showDialog = ref(false)
+
+const handleConfirm = () => {
+  console.log('確認操作')
+  showDialog.value = false
+}
+
+const handleCancel = () => {
+  console.log('取消操作')
+  showDialog.value = false
+}
+</script>
 ```
+</details>
 
-### 使用示例
+### TransferDialog - 穿梭框對話框
 
-```typescript
-// 定義數據類型
-interface User extends Record<string, unknown> {
+用於表格列配置的穿梭框組件，支援拖拽排序。
+
+<details>
+<summary>基本用法</summary>
+
+```vue
+<template>
+  <div>
+    <BaseBtn @click="showTransferDialog = true">配置表格列</BaseBtn>
+    
+    <TransferDialog
+      v-model="showTransferDialog"
+      :columns-value="tableColumns"
+      transfer-title="配置表格列"
+      @update:submit="handleColumnSubmit"
+    >
+      <template #list-container="{ columns, clickItemProp, handleItemEvents, handleMousedown }">
+        <draggable :list="columns" item-key="prop" delay="200">
+          <template #item="{ element, index }">
+            <TransferItem
+              :columns-value="element"
+              :columns-index="index"
+              :columns-len="columns.length"
+              :class="{
+                'transfer-active-bg': element.checkActive,
+                'transfer-active-border': clickItemProp === element.prop,
+              }"
+              @mousedown="handleMousedown(element.prop || '')"
+              @update:toTop="handleItemEvents.toTop(index)"
+              @update:toBottom="handleItemEvents.toBottom(index)"
+              @update:toPre="handleItemEvents.toPre(index)"
+              @update:toNext="handleItemEvents.toNext(index)"
+            />
+          </template>
+        </draggable>
+      </template>
+    </TransferDialog>
+    
+    <!-- 使用配置後的表格 -->
+    <BaseTable
+      :data="tableData"
+      :columns="visibleColumns"
+      style="margin-top: 20px"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import draggable from 'vuedraggable'
+import { BaseBtn, BaseTable, TransferDialog, TransferItem } from 'rayyy-vue-table-components'
+import type { TableColumn } from 'rayyy-vue-table-components'
+
+interface User {
   id: number
   name: string
   email: string
   age: number
-  status: 'active' | 'inactive'
 }
 
-// 定義表格列配置
-const userColumns: TableColumn<User>[] = [
-  {
-    prop: 'id',
-    label: 'ID',
-    width: 80,
-    align: 'center'
-  },
-  {
-    prop: 'name',
-    label: '姓名',
-    width: 120
-  },
-  {
-    prop: 'email',
-    label: '郵箱',
-    width: 200
-  },
-  {
-    prop: 'age',
-    label: '年齡',
-    width: 80,
-    align: 'center',
-    sortable: true
-  },
-  {
-    prop: 'status',
-    label: '狀態',
-    width: 100,
-    align: 'center',
-    formatter: (row: User) => row.status === 'active' ? '啟用' : '停用'
-  }
-]
+const showTransferDialog = ref(false)
+const tableData = ref<User[]>([
+  { id: 1, name: '張三', email: 'zhangsan@example.com', age: 30 },
+  { id: 2, name: '李四', email: 'lisi@example.com', age: 25 }
+])
 
-// 表格數據
-const userData: User[] = [
-  { id: 1, name: '張三', email: 'zhangsan@example.com', age: 25, status: 'active' },
-  { id: 2, name: '李四', email: 'lisi@example.com', age: 30, status: 'inactive' }
-]
+const tableColumns = ref<TableColumn<User>[]>([
+  { prop: 'id', label: 'ID', width: 80, checkActive: true },
+  { prop: 'name', label: '姓名', checkActive: true },
+  { prop: 'email', label: '郵箱', checkActive: true },
+  { prop: 'age', label: '年齡', checkActive: false }
+])
 
-// BaseTable Props 類型示例
-const tableProps: BaseTableProps<User> = {
-  loading: false,
-  data: userData,
-  columns: userColumns,
-  showSelection: true,
-  showSummary: true,
-  showOverFlowTooltip: true,
-  summaryMethod: ({ columns, data }) => {
-    return ['總計', '', '', data.reduce((sum, user) => sum + user.age, 0).toString(), '']
-  },
-  baseTableRowClassName: ({ row, rowIndex }) => {
-    return row.status === 'active' ? 'active-row' : 'inactive-row'
-  }
+const visibleColumns = computed(() => 
+  tableColumns.value.filter(col => col.checkActive)
+)
+
+const handleColumnSubmit = (newColumns: TableColumn<User>[]) => {
+  tableColumns.value = newColumns
+  showTransferDialog.value = false
 }
+</script>
+```
+</details>
 
-// 樣式工具使用示例
-const dynamicCellClass = createTableCellClass({
-  isDismissed: user.status === 'inactive',
-  isHeader: false
-})
+## 🔧 API 參考
 
-const textClass = createTextClass('blue') // 'blue' | 'red' | 'normal'
+### BaseTable
 
-// 在模板中使用預定義樣式
-const cellClasses = [
-  tableStyles.cell,           // 基礎單元格樣式
-  tableStyles.content,        // 內容樣式
-  user.status === 'inactive' ? tableStyles.dismissed : ''
-].filter(Boolean).join(' ')
-```
+基礎表格組件，提供完整的數據展示和交互功能。
 
-## 樣式工具 API
+#### Props
 
-### 預定義樣式
+| 屬性 | 類型 | 默認值 | 說明 |
+|------|------|--------|------|
+| `data` | `T[]` | `[]` | 表格數據 |
+| `columns` | `TableColumn<T>[]` | `[]` | 表格列配置 |
+| `loading` | `boolean` | `false` | 加載狀態 |
+| `showSelection` | `boolean` | `false` | 是否顯示選擇列 |
+| `showSummary` | `boolean` | `false` | 是否顯示合計行 |
+| `showOverFlowTooltip` | `boolean` | `false` | 是否顯示溢出提示 |
+| `summaryMethod` | `SummaryMethod<T>` | - | 合計行計算方法 |
+| `baseTableRowClassName` | `RowClassNameGetter<T>` | - | 行樣式類名函數 |
 
-```typescript
-// 直接使用預定義樣式
-import { tableStyles, componentStyles } from 'rayyy-vue-table-components/utils/styles'
+#### Events
 
-// 表格樣式
-tableStyles.cell        // 表格單元格樣式: 'p-0 h-10'
-tableStyles.header      // 表格標題樣式: 'bg-primary-15 font-bold text-text text-sm leading-4'
-tableStyles.content     // 內容樣式: 'truncate'
-tableStyles.dismissed   // 被駁回行樣式: 'bg-blue-20'
-tableStyles.footer      // 表格底部樣式: 'font-bold'
-tableStyles.blueText    // 藍色文字: 'text-blue-10'
-tableStyles.redText     // 紅色文字: 'text-redText'
-
-// 組件樣式
-componentStyles.sortTableContainer     // SortTable 容器: 'w-full mb-4'
-componentStyles.sortTableFunctionBar   // SortTable 功能欄
-componentStyles.filterBtn              // FilterBtn 按鈕樣式
-componentStyles.transferActiveBg       // Transfer 啟用背景
-componentStyles.baseDialogTitle        // Dialog 標題樣式
-componentStyles.cursorGrab            // 抓取游標
-```
+| 事件名 | 參數 | 說明 |
+|--------|------|------|
+| `selection-change` | `selection: T[]` | 選擇項變更時觸發 |
+| `current-change` | `currentRow: T \| null` | 當前行變更時觸發 |
+| `cell-click` | `column: TableColumn<T>, row: T` | 單元格點擊時觸發 |
+| `column-sort-change` | `value: SortChangValue<T>` | 列排序變更時觸發 |
 
-### 動態樣式函數
+#### Slots
 
-```typescript
-// 創建動態表格單元格樣式
-createTableCellClass(options?: {
-  isDismissed?: boolean
-  isHeader?: boolean
-}) => string
+| 插槽名 | 參數 | 說明 |
+|--------|------|------|
+| `empty` | - | 空數據時的內容 |
+| `append` | - | 插入至表格最後一行之後的內容 |
 
-// 創建文字顏色樣式
-createTextClass(type: 'blue' | 'red' | 'normal' = 'normal') => string
+---
 
-// 使用示例
-const cellClass = createTableCellClass({ 
-  isDismissed: true,  // 添加被駁回樣式
-  isHeader: false     // 不是標題行
-})
-// 結果: 'p-0 h-10 bg-blue-20'
+### BaseBtn
 
-const textClass = createTextClass('blue')
-// 結果: 'text-blue-10'
-```
+增強的按鈕組件，基於 Element Plus Button 擴展。
 
-### 配置對象
+#### Props
 
-```typescript
-// 表格配置對象，適用於 Element Plus 表格組件
-import { dataTableConfig } from 'rayyy-vue-table-components/utils/styles'
+| 屬性 | 類型 | 默認值 | 說明 |
+|------|------|--------|------|
+| `text` | `string` | - | 按鈕文字 |
+| `type` | `ButtonType` | `'default'` | 按鈕類型 |
+| `size` | `ComponentSize` | `'default'` | 按鈕尺寸 |
+| `plain` | `boolean` | `false` | 是否為樸素按鈕 |
+| `disabled` | `boolean` | `false` | 是否禁用 |
+| `loading` | `boolean` | `false` | 是否顯示加載狀態 |
+| `icon` | `Component` | - | 圖標組件 |
+| `link` | `boolean` | `false` | 是否為文字按鈕 |
+| `isFill` | `boolean` | `false` | 是否為填充樣式 |
+
+#### Events
 
-// 在 Element Plus 表格中使用
-<el-table 
-  :cell-class-name="dataTableConfig.cellClass"
-  :header-cell-class-name="dataTableConfig.headerClass"
->
-</el-table>
+| 事件名 | 參數 | 說明 |
+|--------|------|------|
+| `click` | `event: MouseEvent` | 點擊按鈕時觸發 |
+
+#### 類型定義
+
+```typescript
+type ButtonType = 'default' | 'primary' | 'success' | 'warning' | 'info' | 'danger'
+type ComponentSize = 'default' | 'small' | 'large'
 ```
 
-## 組件 API
+---
+
+### BaseDialog
 
-### BaseTable Props
+靈活的對話框組件，支援多種配置選項。
+
+#### Props
 
 | 屬性 | 類型 | 默認值 | 說明 |
 |------|------|--------|------|
-| data | `T[]` | `[]` | 表格數據 |
-| columns | `TableColumn<T>[]` | `[]` | 表格列配置 |
-| loading | `boolean` | `false` | 加載狀態 |
-| showSelection | `boolean` | `false` | 是否顯示選擇列 |
-| showSummary | `boolean` | `false` | 是否顯示合計行 |
-| showOverFlowTooltip | `boolean` | `false` | 是否顯示溢出提示 |
-| summaryMethod | `Function` | - | 合計行計算方法 |
-| baseTableRowClassName | `Function` | - | 行樣式類名函數 |
+| `modelValue` | `boolean` | - | 對話框顯示狀態 |
+| `title` | `string` | - | 對話框標題 |
+| `subTitle` | `string` | - | 副標題 |
+| `customWidth` | `string` | - | 自定義寬度 |
+| `isWarning` | `boolean` | `false` | 是否為警告對話框 |
+| `isPrimary` | `boolean` | `false` | 是否為主要對話框 |
+| `bodyLoading` | `boolean` | `false` | 內容區域加載狀態 |
+| `submitLoading` | `boolean` | `false` | 提交按鈕加載狀態 |
 
-### BaseTable Events
+#### Events
 
 | 事件名 | 參數 | 說明 |
 |--------|------|------|
-| selection-change | `selection: T[]` | 選擇項變更 |
-| current-change | `currentRow: T` | 當前行變更 |
-| cell-click | `column: TableColumn<T>, row: T` | 單元格點擊 |
-| column-sort-change | `value: SortChangValue<T>` | 列排序變更 |
+| `update:modelValue` | `value: boolean` | 對話框顯示狀態變更 |
+| `confirm` | - | 確認按鈕點擊時觸發 |
+| `cancel` | - | 取消按鈕點擊時觸發 |
 
-### BaseTable Props
+#### Slots
 
-| 屬性 | 類型 | 默認值 | 說明 |
-|------|------|--------|------|
-| data | `T[]` | `[]` | 表格數據 |
-| columns | `TableColumn<T>[]` | `[]` | 表格列配置 |
-| loading | `boolean` | `false` | 加載狀態 |
-| showSelection | `boolean` | `false` | 是否顯示選擇列 |
-| showSummary | `boolean` | `false` | 是否顯示合計行 |
-| showOverFlowTooltip | `boolean` | `false` | 是否顯示溢出提示 |
-| summaryMethod | `Function` | - | 合計行計算方法 |
-| baseTableRowClassName | `Function` | - | 行樣式類名函數 |
+| 插槽名 | 參數 | 說明 |
+|--------|------|------|
+| `default` | - | 對話框內容 |
+| `footer` | - | 自定義底部按鈕區域 |
 
-### BaseBtn Props
+---
 
-| 屬性 | 類型 | 默認值 | 說明 |
-|------|------|--------|------|
-| text | `string` | - | 按鈕文字 |
-| type | `'default' \| 'primary' \| 'success' \| 'warning' \| 'info' \| 'danger'` | `'default'` | 按鈕類型 |
-| size | `'default' \| 'small' \| 'large'` | `'default'` | 按鈕尺寸 |
-| plain | `boolean` | `false` | 是否為樸素按鈕 |
-| disabled | `boolean` | `false` | 是否禁用 |
-| loading | `boolean` | `false` | 是否顯示加載狀態 |
-| icon | `object` | - | 圖標 |
-| link | `boolean` | `false` | 是否為文字按鈕 |
-| isFill | `boolean` | `false` | 是否為填充樣式 |
-
-### BaseDialog Props
+### TransferDialog
 
-| 屬性 | 類型 | 默認值 | 說明 |
-|------|------|--------|------|
-| modelValue | `boolean` | - | 對話框顯示狀態 |
-| title | `string` | - | 對話框標題 |
-| subTitle | `string` | - | 副標題 |
-| customWidth | `string` | - | 自定義寬度 |
-| isWaring | `boolean` | `false` | 是否為警告對話框 |
-| isPrimary | `boolean` | `false` | 是否為主要對話框 |
-| bodyLoading | `boolean` | `false` | 內容區域加載狀態 |
-| submitLoading | `boolean` | `false` | 提交按鈕加載狀態 |
+用於表格列配置的穿梭框組件。
 
-### TransferDialog Props
+#### Props
 
 | 屬性 | 類型 | 默認值 | 說明 |
 |------|------|--------|------|
-| modelValue | `boolean` | - | 對話框顯示狀態 |
-| columnsValue | `TableColumn<T>[]` | `[]` | 表格列配置 |
-| transferTitle | `string` | - | 對話框標題 |
+| `modelValue` | `boolean` | - | 對話框顯示狀態 |
+| `columnsValue` | `TableColumn<T>[]` | `[]` | 表格列配置 |
+| `transferTitle` | `string` | - | 對話框標題 |
 
-### TransferDialog Events
+#### Events
 
 | 事件名 | 參數 | 說明 |
 |--------|------|------|
-| update:modelValue | `value: boolean` | 對話框顯示狀態變更 |
-| update:submit | `columns: TableColumn<T>[]` | 提交列配置 |
+| `update:modelValue` | `value: boolean` | 對話框顯示狀態變更 |
+| `update:submit` | `columns: TableColumn<T>[]` | 提交列配置時觸發 |
 
-### TransferDialog Slots
+#### Slots
 
 | 插槽名 | 參數 | 說明 |
 |--------|------|------|
-| list-container | `{ columns, clickItemProp, handleItemEvents, handleMousedown }` | 自定義列表容器，支持拖拽功能 |
+| `list-container` | `ListContainerSlotProps` | 自定義列表容器 |
 
-### TransferItem Props
+#### 類型定義
 
-| 屬性 | 類型 | 默認值 | 說明 |
-|------|------|--------|------|
-| columnsValue | `TableColumn<T>` | - | 列配置對象 |
-| columnsIndex | `number` | - | 列索引 |
-| columnsLen | `number` | - | 總列數 |
-| dialogModalVisible | `boolean` | - | 對話框顯示狀態 |
+```typescript
+interface ListContainerSlotProps<T = any> {
+  columns: TableColumn<T>[]
+  clickItemProp: string
+  handleItemEvents: {
+    toTop: (index: number) => void
+    toBottom: (index: number) => void
+    toPre: (index: number) => void
+    toNext: (index: number) => void
+  }
+  handleMousedown: (prop: string) => void
+}
+```
+
+---
 
-### TableColumn 接口
+### 通用類型定義
+
+#### TableColumn
 
 ```typescript
 interface TableColumn<T = Record<string, unknown>> {
-  prop?: string
+  prop?: keyof T | string
   label: string
   width?: number | string
   type?: 'selection' | 'index' | 'expand'
@@ -499,133 +605,213 @@ interface TableColumn<T = Record<string, unknown>> {
 }
 ```
 
-## TransferDialog 使用指南
+#### SortChangValue
 
-TransferDialog 是一個靈活的表格列配置組件，支持自定義列表容器和拖拽功能。
+```typescript
+interface SortChangValue<T = any> {
+  column: TableColumn<T>
+  prop: keyof T | string
+  order: 'ascending' | 'descending' | null
+}
+```
 
-### 基本使用
+## 🎨 樣式系統
 
-```vue
-<template>
-  <TransferDialog
-    v-model="showDialog"
-    :columns-value="columns"
-    transfer-title="配置表格列"
-    @update:submit="handleSubmit"
-  />
-</template>
+### 樣式導入方式
 
-<script setup lang="ts">
-import { TransferDialog } from 'rayyy-vue-table-components'
+本組件庫提供多種靈活的樣式導入方式，您可以根據項目需求選擇：
 
-const showDialog = ref(false)
-const columns = ref<TableColumn<User>[]>([
-  { prop: 'id', label: 'ID', checkActive: true },
-  { prop: 'name', label: '姓名', checkActive: true },
-  { prop: 'email', label: '郵箱', checkActive: false }
-])
+#### 1. 完整樣式導入（推薦）
 
-const handleSubmit = (newColumns: TableColumn<User>[]) => {
-  columns.value = newColumns
-  showDialog.value = false
+適用於大多數項目，一次性導入所有樣式：
+
+```typescript
+// main.ts
+import 'element-plus/dist/index.css'
+import 'rayyy-vue-table-components/styles'
+```
+
+或在 CSS/SCSS 文件中：
+
+```scss
+// styles.scss
+@import 'element-plus/dist/index.css';
+@import 'rayyy-vue-table-components/styles';
+```
+
+#### 2. 模組化導入
+
+按需導入特定模組的樣式：
+
+```scss
+// 只導入表格相關樣式
+@import 'rayyy-vue-table-components/styles/table';
+
+// 只導入對話框相關樣式
+@import 'rayyy-vue-table-components/styles/dialog';
+
+// 只導入組件樣式
+@import 'rayyy-vue-table-components/styles/components';
+```
+
+#### 3. Element Plus 主題自定義
+
+如果您需要自定義 Element Plus 主題：
+
+```scss
+// styles.scss
+@import 'element-plus/dist/index.css';
+@import 'rayyy-vue-table-components/styles/element';
+```
+
+### TypeScript 樣式工具
+
+提供類型安全的樣式工具函數：
+
+#### 預定義樣式
+
+```typescript
+import { tableStyles, componentStyles } from 'rayyy-vue-table-components/utils/styles'
+
+// 表格樣式常量
+const styles = {
+  cell: tableStyles.cell,           // 'p-0 h-10'
+  header: tableStyles.header,       // 'bg-primary-15 font-bold text-text text-sm leading-4'
+  content: tableStyles.content,     // 'truncate'
+  dismissed: tableStyles.dismissed, // 'bg-blue-20'
+  footer: tableStyles.footer,       // 'font-bold'
+  blueText: tableStyles.blueText,   // 'text-blue-10'
+  redText: tableStyles.redText,     // 'text-redText'
 }
-</script>
+
+// 組件樣式常量
+const componentClasses = {
+  sortTableContainer: componentStyles.sortTableContainer,
+  filterBtn: componentStyles.filterBtn,
+  transferActiveBg: componentStyles.transferActiveBg,
+  baseDialogTitle: componentStyles.baseDialogTitle,
+  cursorGrab: componentStyles.cursorGrab,
+}
+```
+
+#### 動態樣式生成器
+
+```typescript
+import { createTableCellClass, createTextClass } from 'rayyy-vue-table-components/utils/styles'
+
+// 動態生成表格單元格樣式
+const cellClass = createTableCellClass({
+  isDismissed: true,  // 是否被駁回
+  isHeader: false     // 是否為標題行
+})
+// 輸出: 'p-0 h-10 bg-blue-20'
+
+// 動態生成文字顏色樣式
+const textClass = createTextClass('blue') // 'blue' | 'red' | 'normal'
+// 輸出: 'text-blue-10'
 ```
 
-### 自定義拖拽功能
+#### Element Plus 表格配置
+
+```typescript
+import { dataTableConfig } from 'rayyy-vue-table-components/utils/styles'
+
+// 在 Element Plus 原生表格中使用
+<el-table 
+  :cell-class-name="dataTableConfig.cellClass"
+  :header-cell-class-name="dataTableConfig.headerClass"
+  :data="tableData"
+>
+  <el-table-column prop="name" label="姓名" />
+</el-table>
+```
+
+### 自定義主題
+
+您可以通過 CSS 變量來自定義組件主題：
+
+```scss
+:root {
+  // 主色調
+  --primary-color: #409eff;
+  --primary-light: #ecf5ff;
+  
+  // 文字顏色
+  --text-primary: #303133;
+  --text-regular: #606266;
+  --text-secondary: #909399;
+  
+  // 邊框顏色
+  --border-color: #dcdfe6;
+  --border-light: #e4e7ed;
+  
+  // 背景顏色
+  --bg-color: #ffffff;
+  --bg-light: #f5f7fa;
+}
+```
+
+### Tailwind CSS 集成
+
+如果您的項目使用 Tailwind CSS，可以直接使用工具類：
 
 ```vue
 <template>
-  <TransferDialog
-    v-model="showDialog"
-    :columns-value="columns"
-    transfer-title="配置表格列"
-    @update:submit="handleSubmit"
-  >
-    <template #list-container="{ columns, clickItemProp, handleItemEvents, handleMousedown }">
-      <!-- 使用 vuedraggable 實現拖拽 -->
-      <draggable :list="columns" item-key="prop" delay="200">
-        <template #item="{ element, index }">
-          <transfer-item
-            :columns-value="element"
-            :columns-index="index"
-            :columns-len="columns.length"
-            :class="{
-              'transfer-active-bg': element.checkActive,
-              'transfer-active-border': clickItemProp === element.prop,
-            }"
-            @mousedown="handleMousedown(element.prop || '')"
-            @update:toTop="handleItemEvents.toTop(index)"
-            @update:toBottom="handleItemEvents.toBottom(index)"
-            @update:toPre="handleItemEvents.toPre(index)"
-            @update:toNext="handleItemEvents.toNext(index)"
-          />
-        </template>
-      </draggable>
-    </template>
-  </TransferDialog>
+  <BaseTable
+    :data="tableData"
+    :columns="columns"
+    class="shadow-lg rounded-lg"
+    :base-table-row-class-name="getRowClass"
+  />
 </template>
 
 <script setup lang="ts">
-import { TransferDialog, TransferItem } from 'rayyy-vue-table-components'
-import draggable from 'vuedraggable'
+const getRowClass = ({ row, rowIndex }: any) => {
+  return [
+    'hover:bg-gray-50',
+    'transition-colors',
+    rowIndex % 2 === 0 ? 'bg-white' : 'bg-gray-25'
+  ].join(' ')
+}
 </script>
 ```
 
-### 靜態列表（無拖拽）
+### 響應式設計
+
+組件內建響應式支援，您也可以使用響應式工具類：
 
 ```vue
 <template>
-  <TransferDialog
-    v-model="showDialog"
-    :columns-value="columns"
-    transfer-title="配置表格列"
-    @update:submit="handleSubmit"
-  >
-    <template #list-container="{ columns, clickItemProp, handleItemEvents, handleMousedown }">
-      <!-- 使用靜態列表 -->
-      <div class="transfer-list">
-        <template v-for="(element, index) in columns" :key="element.prop">
-          <transfer-item
-            :columns-value="element"
-            :columns-index="index"
-            :columns-len="columns.length"
-            :class="{
-              'transfer-active-bg': element.checkActive,
-              'transfer-active-border': clickItemProp === element.prop,
-            }"
-            @mousedown="handleMousedown(element.prop || '')"
-            @update:toTop="handleItemEvents.toTop(index)"
-            @update:toBottom="handleItemEvents.toBottom(index)"
-            @update:toPre="handleItemEvents.toPre(index)"
-            @update:toNext="handleItemEvents.toNext(index)"
-          />
-        </template>
-      </div>
-    </template>
-  </TransferDialog>
+  <BaseTable
+    :data="tableData"
+    :columns="columns"
+    class="w-full sm:w-auto lg:w-full"
+  />
 </template>
 ```
 
-### 功能特色
+## 🛠️ 開發指南
+
+### 環境要求
 
-- ✅ **靈活的列表容器**：通過 slot 自定義列表渲染方式
-- ✅ **可選的拖拽功能**：支持或不支持拖拽排序
-- ✅ **內建排序操作**：上移、下移、置頂、置底
-- ✅ **搜尋過濾**：按列名快速定位
-- ✅ **批量選擇**：全選/取消全選功能
-- ✅ **狀態保持**：記住列的顯示/隱藏狀態
+- Node.js 16.0+
+- Vue 3.0+
+- Element Plus 2.0+
 
-## 開發
+### 本地開發
 
 ```bash
+# 克隆項目
+git clone https://github.com/your-username/vue-table-components.git
+cd vue-table-components
+
 # 安裝依賴
 npm install
 
 # 開發模式
 npm run dev
 
-# 構建庫（包含樣式）
+# 構建庫
 npm run build-lib
 
 # 運行測試
@@ -635,35 +821,61 @@ npm run test:unit
 npm run lint
 ```
 
-### 樣式開發指南
+### 項目結構
+
+```
+src/
+├── components/          # 組件源碼
+│   ├── BaseTable.vue   # 基礎表格組件
+│   ├── BaseBtn.vue     # 按鈕組件
+│   ├── BaseDialog.vue  # 對話框組件
+│   └── transfer/       # 穿梭框組件
+├── assets/styles/      # 樣式文件
+│   ├── tailwind.scss   # 主樣式入口
+│   ├── _table.scss     # 表格樣式
+│   ├── _dialog.scss    # 對話框樣式
+│   └── element/        # Element Plus 主題
+├── types/              # 類型定義
+├── utils/              # 工具函數
+└── index.ts            # 主入口文件
+```
+
+### 貢獻指南
 
-本組件庫採用現代化的樣式架構：
+歡迎貢獻代碼！請遵循以下步驟：
 
-1. **Sass 模組化**：使用 `@use` 語法替代 `@import`
-2. **Tailwind CSS 集成**：支援 Tailwind 工具類和自定義樣式
-3. **TypeScript 樣式工具**：提供類型安全的樣式函數
-4. **多種導出方式**：支援不同項目需求
+1. Fork 本項目
+2. 創建功能分支：`git checkout -b feature/amazing-feature`
+3. 提交更改：`git commit -m 'Add some amazing feature'`
+4. 推送分支：`git push origin feature/amazing-feature`
+5. 提交 Pull Request
 
-#### 樣式文件結構
+## 🤝 社區與支持
 
-```
-src/assets/styles/
-├── tailwind.scss          # 主樣式入口
-├── _table.scss           # 表格樣式
-├── _dialog.scss          # 對話框樣式
-└── element/
-    └── index.scss        # Element Plus 主題自定義
-
-src/utils/
-└── tableStyles.ts        # TypeScript 樣式工具
-```
+### 問題反饋
+
+如果您遇到問題或有功能建議，請通過以下方式聯繫我們：
+
+- [GitHub Issues](https://github.com/your-username/vue-table-components/issues)
+- [討論區](https://github.com/your-username/vue-table-components/discussions)
+
+### 版本更新
+
+查看 [CHANGELOG.md](./CHANGELOG.md) 了解詳細的版本更新記錄。
+
+### 相關鏈接
+
+- [Vue 3 官方文檔](https://vuejs.org/)
+- [Element Plus 官方文檔](https://element-plus.org/)
+- [TypeScript 官方文檔](https://www.typescriptlang.org/)
+- [Tailwind CSS 官方文檔](https://tailwindcss.com/)
 
-#### 添加新樣式
+## 📄 許可證
 
-1. **SCSS 樣式**：在對應的 `_*.scss` 文件中添加
-2. **TypeScript 工具**：在 `tableStyles.ts` 中添加新的工具函數
-3. **導出配置**：在 `package.json` 的 `exports` 中添加新的導出路徑
+本項目基於 [MIT License](./LICENSE) 開源協議。
 
-## 許可證
+---
 
-MIT License
+<p align="center">
+  Made with ❤️ by the Vue Table Components Team
+</p>