@yetuzi/vue3-query-components 1.1.38 → 1.2.1

package/CHANGELOG.md

@@ -0,0 +1,105 @@
+# 更新日志
+
+## [1.2.0] - 2025-01-06
+
+### 优化
+- ✨ CommonForm - 优化类型命名，提升代码可读性
+  - `CommonFormPropForm` → `CommonFormItemArray`
+  - `CommonFormSupplement` → `CommonFormItemBase`
+  - `CommonFormCustomComponentsItem` → `CommonFormCustomItem`
+- ✨ CommonTable - 优化类型命名，与 CommonForm 保持一致
+  - `TableColumnSupplement` → `TableColumnBase`
+- 📝 为所有类型定义添加详细的 JSDoc 注释
+- 📝 添加类型参数说明和使用示例
+- 📝 改善 IDE 智能提示体验
+
+### 文档
+- 📝 优化文档内容和结构
+- 📝 添加 CSS 引入说明
+- 📝 修复文档中的无效 demo 标签
+
+### 修复
+- 🔧 替换 sass 为 sass-embedded，解决 Dart Sass 弃用警告
+- 🔧 更新依赖锁定文件
+
+## [1.1.38] - 2024-12-XX
+
+### 重构
+- ♻️ 重构 CommonTable 类型系统
+- ♻️ 重构 CommonForm 类型系统
+
+### 新增
+- 🔧 添加 vue-component-type-helpers 依赖
+
+## [1.0.4] - 2024-12-11
+
+### 修复
+- 🔧 修复 Element Plus 组件样式缺失问题
+- 📝 为所有组件手动添加对应的 Element Plus CSS 导入
+
+### 优化
+- ✨ CommonQueryTable - 添加 ElLoading 样式
+- ✨ CommonTable - 添加 ElTable、ElEmpty、ElTableColumn 样式
+- ✨ CommonForm - 添加 ElForm、ElFormItem、ElButton 样式
+- ✨ CommonInput - 添加 ElInput 样式
+- ✨ CommonSelect - 添加 ElSelect、ElOption 样式
+- ✨ CommonDatePicker - 添加 ElDatePicker 样式
+- ✨ CommonPagination - 添加 ElPagination 样式
+- ✨ CommonRadio - 添加 ElRadioGroup、ElRadio 样式
+- ✨ CommonCheckbox - 添加 ElCheckboxGroup、ElCheckbox 样式
+- ✨ CommonSwitch - 添加 ElSwitch 样式
+- ✨ CommonButton - 添加 ElButton 样式
+
+## [1.0.1] - 2024-12-10
+
+### 更新
+- 📝 更新 README.md 包名引用
+- ✨ 完善文档和使用示例
+- 🔧 优化组件配置系统
+
+## [1.0.0] - 2024-12-09
+
+### 新增
+- 🎉 vue3-query-components 初始版本发布
+- ✨ CommonTable 查询表格组件
+  - 支持分页配置
+  - 支持自定义表头样式
+  - 支持数据加载状态
+  - 支持空数据占位符
+- ✨ CommonForm 通用表单组件
+  - 支持多种表单控件类型
+  - 支持表单验证
+  - 支持搜索和重置功能
+  - 支持自定义布局
+- 🔧 工具函数库
+  - 日期格式化工具
+  - 数据处理工具
+  - 通用验证工具
+- 🎯 Vue 3 Composition API Hooks
+  - useTable 表格 hooks
+  - useForm 表单 hooks
+  - useHttp 请求 hooks
+- 📦 TypeScript 支持
+  - 完整的类型定义
+  - 类型推导支持
+- 🎨 Element Plus 主题集成
+  - 自定义主题配置
+  - 响应式设计支持
+
+### 技术栈
+- Vue 3.5+
+- Element Plus 2.11+
+- TypeScript 5.9+
+- Vite 6.0+
+- alova 3.3+ (HTTP 客户端)
+- dayjs 1.11+ (日期处理)
+- lodash-es 4.17+ (工具函数)
+- vue-hooks-plus 2.4+ (Vue Hooks)
+
+### 特性
+- 📦 开箱即用
+- 🎨 基于 Element Plus 设计
+- 🔧 高度可配置
+- 📝 TypeScript 支持
+- 🌳 树摇优化
+- 🔥 热更新支持（开发模式）

package/README.md

@@ -1,18 +1,27 @@
 # @yetuzi/vue3-query-components
 
-基于 Vue 3 + Element Plus 的企业级查询页面组件库，专注于表格查询场景，开箱即用。
+<div align="center">
+
+**企业级查询页面组件库**
+
+专为 Vue3 设计的高效查询组件，提升开发效率
+
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](../../LICENSE)
+[![Vue](https://img.shields.io/badge/Vue-3.5+-brightgreen)](https://vuejs.org/)
+[![TypeScript](https://img.shields.io/badge/TypeScript-5.9+-blue)](https://www.typescriptlang.org/)
+[![Element Plus](https://img.shields.io/badge/Element%20Plus-2.11+-blueviolet)](https://element-plus.org/)
+[![npm version](https://img.shields.io/npm/v/@yetuzi/vue3-query-components)](https://www.npmjs.com/package/@yetuzi/vue3-query-components)
+
+</div>
 
 ## ✨ 特性
 
-- 🚀 **开箱即用** - 高度封装的业务组件，减少重复开发
-- 🎨 **统一设计** - 基于 Element Plus 设计语言，支持全局配置
-- 🔧 **高度可配置** - 灵活的配置选项，满足不同业务需求
-- 📦 **TypeScript 支持** - 完整的类型定义，类型安全
-- 🌳 **Tree Shaking** - 按需引入，减小打包体积
-- 🔥 **热更新** - 支持开发模式热更新
-- 🎯 **业务导向** - 专注于查询、表单、表格等常见业务场景
-- 🔄 **状态管理** - 内置数据请求、分页、表单状态管理
-- 🎨 **插槽支持** - 灵活的插槽系统，支持自定义扩展
+- 🚀 **一体化查询** - CommonQueryTable 集成表单、表格、分页，一个组件即可构建完整的查询页面，支持灵活的布局配置
+- 📋 **类型安全** - 完整的 TypeScript 泛型支持，列类型、表单项类型自动推导，提供精准的类型提示和校验
+- 🎨 **高度可定制** - 响应式全局配置系统，支持自定义组件、插槽和样式扩展，满足各种业务场景需求
+- 🧩 **丰富组件** - 提供 CommonTable（多种列类型）、CommonForm（7种表单项）及完整的基础组件体系
+- ⚡️ **开箱即用** - 基于 Element Plus 封装，API 设计一致，学习成本低，大幅提升开发效率
+- 🛠️ **实用工具** - 内置 useResettable 等实用 hooks，提供可重置的响应式数据管理能力
 
 ## 📦 安装
 
@@ -26,17 +35,24 @@ pnpm add @yetuzi/vue3-query-components
 
 ## 🚀 快速开始
 
-### 1. 全局引入
+### 1. 安装 Element Plus
 
-```typescript
-import { createApp } from 'vue'
-import '@yetuzi/vue3-query-components/dist/style.css'
-import 'element-plus/theme-chalk/index.css' // 需要安装 Element Plus
+本组件库基于 Element Plus 封装，需要先安装 Element Plus：
+
+```bash
+npm install element-plus
+```
+
+### 2. 导入样式
 
-const app = createApp(App)
+**重要**：本组件库不会自动导入 CSS，需要手动导入：
+
+```typescript
+// 导入组件库样式
+import '@yetuzi/vue3-query-components/dist/index.css'
 ```
 
-### 2. 按需引入
+### 3. 按需引入组件
 
 ```typescript
 import {
@@ -45,11 +61,9 @@ import {
   CommonForm,
   CommonConfigProvider,
 } from '@yetuzi/vue3-query-components'
-import '@yetuzi/vue3-query-components/dist/style.css'
-import 'element-plus/theme-chalk/index.css' // 需要安装 Element Plus
 ```
 
-### 3. 基础使用
+### 4. 基础使用
 
 #### 完整查询表格组件（推荐）
 
@@ -189,7 +203,39 @@ const queryTableConfig = {
 </script>
 ```
 
-## 📚 组件文档
+## 📚 组件列表
+
+### 核心组件
+
+| 组件名 | 说明 |
+|--------|------|
+| `CommonQueryTable` | 一体化查询表格，集成表单、表格、分页 |
+| `CommonTable` | 增强型表格组件，支持多种列类型 |
+| `CommonForm` | 动态表单组件，支持 7 种表单项 |
+| `CommonConfigProvider` | 全局配置组件，提供统一的组件配置 |
+
+### 基础组件
+
+| 组件名 | 说明 |
+|--------|------|
+| `CommonInput` | 输入框组件 |
+| `CommonSelect` | 下拉选择组件 |
+| `CommonDatePicker` | 日期选择器组件 |
+| `CommonRadio` | 单选框组件 |
+| `CommonCheckbox` | 复选框组件 |
+| `CommonSwitch` | 开关组件 |
+| `CommonButton` | 按钮组件 |
+| `CommonPagination` | 分页组件 |
+
+### Hooks
+
+| Hook 名 | 说明 |
+|---------|------|
+| `useResettableRef` | 创建可重置的 ref |
+| `useResettableReactive` | 创建可重置的 reactive |
+| `useGetComponentsChildrenSlots` | 获取组件子插槽 |
+
+## 📚 API 文档
 
 ### CommonQueryTable Props
 
@@ -202,14 +248,30 @@ const queryTableConfig = {
 
 ### 表单组件类型支持
 
-支持以下表单组件类型：
+CommonForm 支持以下 7 种内置表单项类型：
 
-- `input` - 输入框
-- `select` - 下拉选择
-- `date-picker` - 日期选择器
-- `radio` - 单选框组
-- `check-box` - 复选框组
-- `switch` - 开关
+| 组件类型 | 说明 | 用途 |
+|---------|------|------|
+| `input` | 输入框 | 文本、数字等简单输入 |
+| `select` | 下拉选择 | 单选下拉选项 |
+| `date-picker` | 日期选择器 | 日期、日期时间范围选择 |
+| `radio` | 单选框组 | 互斥选项选择 |
+| `check-box` | 复选框组 | 多选选项 |
+| `switch` | 开关 | 二元状态切换 |
+| 自定义组件 | 任意 Vue 组件 | 扩展自定义表单项 |
+
+### 表格列类型支持
+
+CommonTable 支持多种特殊列类型：
+
+| 列类型 | 说明 | 使用场景 |
+|--------|------|----------|
+| `index` | 索引列 | 自动显示行号 |
+| `selection` | 选择列 | 多选功能 |
+| `expand` | 展开列 | 行内容展开 |
+| `date` | 日期列 | 自动格式化日期显示 |
+| `dateTime` | 日期时间列 | 自动格式化日期时间显示 |
+| 普通列 | 数据列 | 绑定字段数据 |
 
 ### 表单配置项类型
 
@@ -284,56 +346,53 @@ interface TableColumn {
 
 ### 环境要求
 
-- Node.js >= 18.0.0
+- Node.js >= 16.0.0
 - Vue 3.5+
 - Element Plus 2.11+
 - TypeScript 5.9+
 
-### 本地开发
-
-```bash
-# 克隆项目
-git clone https://gitee.com/yetuzi/vue3-common.git
-cd vue3-common/vue3-query-components
-
-# 安装依赖
-npm install
-
-# 开发模式（构建并监听文件变化）
-npm run dev
-
-# 构建
-npm run build
-
-# 类型检查
-npm run type-check
-
-# 代码格式化
-npm run format
+### 依赖说明
 
-# Lint
-npm run lint
+#### Peer Dependencies（需要宿主项目安装）
 
-# 测试
-npm test
+```json
+{
+  "peerDependencies": {
+    "vue": "^3.5.0",
+    "element-plus": "^2.11.5"
+  }
+}
 ```
 
-### 依赖说明
+#### Dependencies（随组件库一起安装）
 
 ```json
 {
-  "peerDependencies": {
-    "vue": "^3.5.0", // Vue 3 - 需要宿主项目安装
-    "element-plus": "^2.11.5" // Element Plus UI 库 - 需要宿主项目安装
-  },
   "dependencies": {
-    "dayjs": "^1.11.18", // 日期处理库
-    "lodash-es": "^4.17.21", // 工具函数库
-    "vue-hooks-plus": "^2.4.1" // Vue 组合式 API 工具库
+    "dayjs": "^1.11.18",
+    "lodash-es": "^4.17.21",
+    "vue-hooks-plus": "^2.4.1"
   }
 }
 ```
 
+### 构建产物
+
+组件库构建后生成以下文件：
+
+```
+dist/
+├── index.js       # ES Module 格式的组件代码
+├── index.d.ts     # TypeScript 类型声明文件
+├── index.css      # 组件库样式文件
+└── index.js.map   # Source Map 文件
+```
+
+**重要说明**：
+- 组件库采用 ES Module 格式输出
+- 不会自动导入 CSS，需要手动导入样式文件
+- Vue 和 Element Plus 被外部化，不会打包进组件库（减小体积）
+
 ## 🎯 使用场景
 
 本组件库特别适用于：
@@ -347,14 +406,14 @@ npm test
 
 [MIT](./LICENSE)
 
-## 🤝 贡献
+## 📞 支持与反馈
 
-欢迎提交 Issue 和 Pull Request！
+如有问题或建议，请提交 [Issue](https://gitee.com/yetuzi/vue3-common/issues)
 
-## 📞 支持
+## 🗺️ 更新日志
 
-如有问题，请提交 [Issue](https://gitee.com/yetuzi/vue3-common/issues)
+查看详细的更新日志：[CHANGELOG.md](./CHANGELOG.md)
 
-## 🗺️ 更新日志
+---
 
-查看详细的更新日志请访问：[CHANGELOG.md](./CHANGELOG.md)
+Made with ❤️ by [yetuzi](https://gitee.com/yetuzi)

package/dist/index.css

@@ -1 +1 @@
-.common-query-table[data-v-a726f75e]{--spacing: 15px;width:100%;height:100%;flex:1;display:flex;flex-direction:column;box-sizing:border-box;padding:var(--spacing) 12px;overflow:hidden}[class^=common-query-table-][data-v-a726f75e]{width:100%}[class^=common-query-table-]+[class^=common-query-table-][data-v-a726f75e]{margin-top:var(--spacing)}.common-query-table .common-query-table-table[data-v-a726f75e]{flex:1;overflow:hidden}.el-form[data-v-819162d5]{margin-bottom:-18px!important}.el-form .el-form-item[data-v-819162d5] .el-form-item__content{width:var(--v91075878)}.el-form .el-form-item[data-v-819162d5] .el-select,.el-form .el-form-item[data-v-819162d5] .el-input,.el-form .el-form-item[data-v-819162d5] .el-date-editor{width:100%}.common-table[data-v-f2448cc7]{width:100%;height:100%;display:flex;flex-direction:column}
+.common-query-table[data-v-a726f75e]{--spacing: 15px;width:100%;height:100%;flex:1;display:flex;flex-direction:column;box-sizing:border-box;padding:var(--spacing) 12px;overflow:hidden}[class^=common-query-table-][data-v-a726f75e]{width:100%}[class^=common-query-table-]+[class^=common-query-table-][data-v-a726f75e]{margin-top:var(--spacing)}.common-query-table .common-query-table-table[data-v-a726f75e]{flex:1;overflow:hidden}.el-form[data-v-dfc558ab]{margin-bottom:-18px!important}.el-form .el-form-item[data-v-dfc558ab] .el-form-item__content{width:var(--a5bfb0ac)}.el-form .el-form-item[data-v-dfc558ab] .el-select,.el-form .el-form-item[data-v-dfc558ab] .el-input,.el-form .el-form-item[data-v-dfc558ab] .el-date-editor{width:100%}.common-table[data-v-4dc3e15a]{width:100%;height:100%;display:flex;flex-direction:column}