\n prop: keyof T | string\n order: 'ascending' | 'descending' | null\n}\n```\n\n#### Pager\n\n```typescript\ninterface Pager {\n page: number\n limit: number\n totalCount: number\n}\n```\n\n## 🎨 樣式系統\n\n### 樣式導入方式\n\n本組件庫提供多種靈活的樣式導入方式，您可以根據項目需求選擇：\n\n#### 1. 完整樣式導入（推薦）\n\n適用於大多數項目，一次性導入所有樣式：\n\n```typescript\n// main.ts\nimport 'element-plus/dist/index.css'\nimport 'rayyy-vue-table-components/styles'\n```\n\n或在 CSS/SCSS 文件中：\n\n```scss\n// styles.scss\n@import 'element-plus/dist/index.css';\n@import 'rayyy-vue-table-components/styles';\n```\n\n#### 2. 模組化導入\n\n按需導入特定模組的樣式：\n\n```scss\n// 只導入表格相關樣式\n@import 'rayyy-vue-table-components/styles/table';\n\n// 只導入對話框相關樣式\n@import 'rayyy-vue-table-components/styles/dialog';\n\n// 只導入組件樣式\n@import 'rayyy-vue-table-components/styles/components';\n```\n\n#### 3. Element Plus 主題自定義\n\n如果您需要自定義 Element Plus 主題：\n\n```scss\n// styles.scss\n@import 'element-plus/dist/index.css';\n@import 'rayyy-vue-table-components/styles/element';\n```\n\n### 樣式類別\n\n組件庫提供預定義的 CSS 類別，您可以直接在組件中使用：\n\n```vue\n\n \n 篩選按鈕
\n 轉移項目
\n 表格單元格
\n\n```\n\n### 自定義主題\n\n您可以通過 CSS 變量來自定義組件主題：\n\n```scss\n:root {\n // 主色調\n --primary-color: #409eff;\n --primary-light: #ecf5ff;\n \n // 文字顏色\n --text-primary: #303133;\n --text-regular: #606266;\n --text-secondary: #909399;\n \n // 邊框顏色\n --border-color: #dcdfe6;\n --border-light: #e4e7ed;\n \n // 背景顏色\n --bg-color: #ffffff;\n --bg-light: #f5f7fa;\n}\n```\n\n### Tailwind CSS 集成\n\n如果您的項目使用 Tailwind CSS，可以直接使用工具類：\n\n```vue\n\n \n\n\n\n```\n\n### 響應式設計\n\n組件內建響應式支援，您也可以使用響應式工具類：\n\n```vue\n\n \n\n```\n\n## 🛠️ 開發指南\n\n### 環境要求\n\n- Node.js 22.0+\n- npm 10.0+\n- Vue 3.5+\n- Element Plus 2.11+\n- TypeScript 5.8+\n\n### 本地開發\n\n```bash\n# 克隆項目\ngit clone https://github.com/your-username/vue-table-components.git\ncd vue-table-components\n\n# 安裝依賴\nnpm install\n\n# 開發模式（啟動演示網站）\nnpm run dev\n\n# 構建組件庫\nnpm run build-lib\n\n# 構建演示網站\nnpm run build-demo\n\n# 運行單元測試\nnpm run test:unit\n\n# 運行 E2E 測試\nnpm run test:e2e\n\n# 代碼檢查和格式化\nnpm run lint\nnpm run format\n\n# TypeScript 類型檢查\nnpm run type-check\n```\n\n### 快速發布\n\n使用內建的發布腳本快速發布新版本：\n\n```bash\n# 修復版本 (1.3.10 -> 1.3.11)\nnpm run release:patch\n\n# 次要版本 (1.3.10 -> 1.4.0)\nnpm run release:minor\n\n# 主要版本 (1.3.10 -> 2.0.0)\nnpm run release:major\n```\n\n發布腳本會自動執行：\n- ✅ 運行所有測試\n- ✅ 代碼品質檢查\n- ✅ TypeScript 類型檢查\n- ✅ 構建組件庫\n- ✅ 更新版本號\n- ✅ 創建 git tag\n- ✅ 推送到遠端\n- ✅ 發布到 npm\n\n### 項目結構\n\n```\nsrc/\n├── components/ # 組件源碼\n│ ├── form/ # 表單組件\n│ │ └── BaseInput.vue\n│ ├── items/ # 交互組件\n│ │ ├── BaseBtn.vue\n│ │ ├── BaseDialog.vue\n│ │ ├── BaseWaringDialog.vue\n│ │ └── SearchBar.vue\n│ ├── tables/ # 表格組件\n│ │ ├── BaseTable.vue\n│ │ ├── SortTable.vue\n│ │ └── TitleTable.vue\n│ ├── layout/ # 佈局組件\n│ │ ├── MainPanel.vue\n│ │ ├── DetailLayout.vue\n│ │ ├── FilterLayout.vue\n│ │ ├── FunctionHeader.vue\n│ │ └── SearchableListPanel.vue\n│ ├── transfer/ # 轉移組件\n│ │ ├── TransferDialog.vue\n│ │ └── transferItem.vue\n│ └── index.ts # 組件導出\n├── assets/styles/ # 樣式文件\n│ ├── tailwind.scss # 主樣式入口\n│ ├── _base.scss # 基礎樣式\n│ ├── _tables.scss # 表格相關樣式\n│ ├── _dialogs.scss # 對話框相關樣式\n│ ├── _components.scss # 組件樣式\n│ └── element/ # Element Plus 主題\n├── types/ # 類型定義\n│ ├── components.d.ts # 組件類型定義\n│ └── index.ts # 類型導出\n├── utils/ # 工具函數\n│ ├── tableHelper.ts # 表格工具函數\n│ └── routeFormatters.ts # 路由格式化\n├── views/ # 演示頁面\n│ ├── demo/ # 組件演示\n│ └── DemoPage.vue # 演示首頁\n├── router/ # 路由配置\n├── const/ # 常量定義\n└── index.ts # 主入口文件\n```\n\n### 貢獻指南\n\n歡迎貢獻代碼！請遵循以下步驟：\n\n1. Fork 本項目\n2. 創建功能分支：`git checkout -b feature/amazing-feature`\n3. 提交更改：`git commit -m 'Add some amazing feature'`\n4. 推送分支：`git push origin feature/amazing-feature`\n5. 提交 Pull Request\n\n## 🤝 社區與支持\n\n### 問題反饋\n\n如果您遇到問題或有功能建議，請通過以下方式聯繫我們：\n\n- [GitHub Issues](https://github.com/your-username/vue-table-components/issues)\n- [討論區](https://github.com/your-username/vue-table-components/discussions)\n\n### 版本更新\n\n查看 [CHANGELOG.md](./CHANGELOG.md) 了解詳細的版本更新記錄。\n\n#### 最新更新 (v2.0.52)\n\n**🗂️ 表格組件增強**\n- ✅ 新增展開行功能：`showExpand` prop + `expand` slot，支援自訂展開內容\n- ✅ 新增 `preserveExpanded` prop，資料更新時可保留已展開狀態\n- ✅ 新增 `showIndex` prop，支援索引列顯示\n- ✅ BaseTable、SortTable、TitleTable 三個表格組件皆支援上述功能\n- ✅ 新增 `BaseTableSlots`、`SortTableSlots`、`TitleTableSlots` 類型定義\n\n#### v2.0.22\n\n**🌐 國際化 (i18n) 支持**\n- ✅ 新增完整的國際化支持，支援繁體中文 (zh-TW) 和英文 (en-US)\n- ✅ 所有組件文字已替換為 i18n 翻譯鍵值\n- ✅ 支援外部專案語系同步，需要合併 JSON 檔案使用\n- ✅ 提供 `vue-i18n` 整合，支援 `>=10.0.0` 版本\n- ✅ 新增語系切換功能，支援動態語言切換\n- ✅ 提供翻譯檔案自動更新腳本，支援 Google Sheets 整合\n- ✅ **SearchableListPanel 支援 locale prop 來覆寫 i18n 設定**\n\n**🔧 技術改進**\n- ✅ 修復 `vue-i18n` 依賴版本衝突問題\n- ✅ 優化模組導出配置，支援 `./locales` 子路徑導入\n- ✅ 完善 TypeScript 類型定義，提供完整的 i18n 類型支持\n- ✅ 修復構建配置，確保翻譯檔案正確打包\n- ✅ 更新 Vite 配置，優化 i18n 資源處理\n\n**📦 新增功能**\n- ✅ 新增 `useI18n` 和 `setLocale` 工具函數\n- ✅ 新增 `messages` 和 `LocaleType` 類型導出\n- ✅ 新增 i18n 測試演示頁面\n- ✅ 新增語系切換按鈕和演示功能\n\n### 組件統計\n\n本組件庫目前包含 **15 個組件**，涵蓋以下類別：\n\n| 類別 | 組件數量 | 主要組件 |\n|------|----------|----------|\n| 🗂️ 表格組件 | 3 | BaseTable, SortTable, TitleTable |\n| 🎛️ 表單組件 | 1 | BaseInput |\n| 🎨 交互組件 | 3 | BaseBtn, BaseDialog, BaseWaringDialog, SearchBar |\n| 🏗️ 佈局組件 | 5 | MainPanel, DetailLayout, FilterLayout, FunctionHeader, SearchableListPanel |\n| 🔄 轉移組件 | 2 | TransferDialog, TransferItem |\n\n### 相關鏈接\n\n- [Vue 3 官方文檔](https://vuejs.org/)\n- [Element Plus 官方文檔](https://element-plus.org/)\n- [TypeScript 官方文檔](https://www.typescriptlang.org/)\n- [Tailwind CSS 官方文檔](https://tailwindcss.com/)\n- [Vite 官方文檔](https://vitejs.dev/)\n- [Vitest 測試框架](https://vitest.dev/)\n\n## 📄 許可證\n\n本項目基於 [MIT License](./LICENSE) 開源協議。\n\n---\n\n\n Made with ❤️ by the Vue Table Components Team\n
","readmeFilename":"README.md"}![\"npm](\"https://img.shields.io/npm/v/rayyy-vue-table-components.svg\")
\n ![\"npm](\"https://img.shields.io/npm/dm/rayyy-vue-table-components.svg\")
\n ![\"license\"](\"https://img.shields.io/github/license/rayshao/vue-table-components.svg\")
\n ![\"vue\"](\"https://img.shields.io/badge/vue-3.x-brightgreen.svg\"){kind=icon}
\n