Dong Composables

一个基于 Vue 3 的 TypeScript 组合式函数库，提供了常用的业务组件和工具函数，特别集成了 Ant Design Vue 的列表组件混入功能。

简介

Dong Composables 是一个轻量级的 Vue 3 组合式函数库，专注于提供可复用的业务逻辑。该库主要包含以下功能：

• dongAntListMixin: 一个列表页面混入函数，集成了分页、搜索、排序、增删改查等功能
• getCurrentTimeInFormat: 时间格式化工具函数

该库支持 Vue 3 和 React 混合使用，具有良好的类型安全性和可扩展性。

特性

• 🚀 TypeScript 支持: 完整的类型定义，提供优秀的开发体验
• 📦 轻量级: 专注于核心功能，保持库的轻量级
• 🔧 易于使用: 简单的 API 设计，快速上手
• 🎨 Ant Design 集成: 与 Ant Design Vue 无缝集成
• 🧪 测试覆盖: 包含完整的单元测试

安装

npm install dong-composables
# 或
yarn add dong-composables
# 或
pnpm add dong-composables

快速开始

使用 dongAntListMixin

dongAntListMixin 提供了完整的列表页面功能，包括分页、搜索、排序、增删改查等：

typescript
import { dongAntListMixin } from 'dong-composables';

// 定义数据类型
interface User {
id: string;
name: string;
createTime: string;
}

// 创建混入实例
const {
queryParam,
loading,
dataSource,
Pagination,
url,
handleAdd,
handleEdit,
handleDetails,
handleDel,
loadData
} = dongAntListMixin<User>();

// 配置接口地址
url.value = {
listAction: (params) => fetchUserList(params), // 列表接口
deleteAction: (record) => deleteUser(record), // 删除接口
deleteBatchAction: (params) => batchDeleteUser(params) // 批量删除接口
};

// 加载数据
loadData();

使用 getCurrentTimeInFormat

时间格式化工具函数，支持多种格式：

typescript
import { getCurrentTimeInFormat } from 'dong-composables';

// 基本用法
const time1 = getCurrentTimeInFormat('YYYY-MM-DD hh:mm:ss A');
// 返回 '2023-06-15 05:49:38 PM'

// 使用12小时制
const time2 = getCurrentTimeInFormat('MM/DD/YYYY h:m a');
// 返回 '06/15/2023 5:49 pm'

// 使用24小时制
const time3 = getCurrentTimeInFormat('YYYY-MM-DD HH:mm:ss');
// 返回 '2023-06-15 17:49:38'

API 文档

dongAntListMixin<T>(disableCreated = false)

创建一个列表页面混入实例。

参数

• disableCreated: 是否禁用初始化加载，默认为 false

返回值

返回一个包含以下属性和方法的对象：

属性

• queryParam: 查询参数
• toggleSearchStatus: 搜索面板展开状态
• Pagination: 分页配置
• isSorter: 排序参数
• loading: 加载状态
• dataSource: 数据源
• url: 接口配置
• selectedRowKeys: 选中行的键值
• selectedRows: 选中行的数据
• fromModalRef: 表单弹窗引用

方法

• handleToggleSearch: 切换搜索面板展开状态
• searchQuery: 执行搜索
• searchReset: 重置搜索条件
• handleCurrentChange: 处理页码变更
• handleSizeChange: 处理页面大小变更
• handleTableChange: 处理表格变更（分页、排序等）
• clearObjectFields: 清空对象字段值
• loadData: 加载数据
• onSelectChange: 处理选中行变更
• handleAdd: 处理新增操作
• handleEdit: 处理编辑操作
• handleDetails: 处理查看详情操作
• handleDel: 处理删除操作
• handleDelBatch: 处理批量删除操作

getCurrentTimeInFormat(format, nowDate)

获取当前时间并按照指定格式返回。

参数

• format: 时间格式字符串，默认为 'YYYY-MM-DD hh:mm:ss'
• nowDate: 当前时间对象，默认为当前时间

格式占位符

• YYYY: 4位数年份
• MM: 2位数月份（带前导零）
• M: 月份（不带前导零）
• DD: 2位数日期（带前导零）
• D: 日期（不带前导零）
• hh: 2位数小时（若格式中包含 'A' 或 'a'，自动使用12小时制，带前导零）
• h: 小时（若格式中包含 'A' 或 'a'，自动使用12小时制）
• mm: 2位数分钟（带前导零）
• m: 分钟（不带前导零）
• ss: 2位数秒（带前导零）
• s: 秒（不带前导零）
• SSS: 3位数毫秒（带前导零）
• A: 大写 AM 或 PM
• a: 小写 am 或 pm

构建

项目使用 Vite 进行构建：

bash
# 构建库
npm run build

# 运行测试
npm run test

# 运行测试并监听变化
npm run test:watch

# 检查代码
npm run lint:eslint

# 格式化代码
npm run format

测试

项目使用 Vitest 进行单元测试，测试文件位于 src/**/test/ 目录下。

贡献

欢迎提交 Issue 和 Pull Request 来改进项目。

许可证

MIT

## 项目结构

src/ ├── composables/ # 组合式函数 │ └── dongAntListMixin/ # 列表混入函数 │ ├── index.ts # 主要实现 │ └── test/ # 测试文件 ├── utils/ # 工具函数 │ └── index.ts # 时间格式化工具 └── index.ts # 入口文件

这个 README.md 文件全面介绍了项目，包括其功能、使用方法和API文档，基于项目文件的实际内容编写。