bw-pro-table 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 bw-pro-table
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,341 @@
+# BwProTable
+
+基于 **ant-design-vue 3/4** 的高级业务表格组件，提供 ProTable 级别的开箱即用体验。
+
+## 特性
+
+- 🚀 **双模式数据加载**：支持 `request` 异步请求模式 和 `dataSource` 静态数据模式，无缝切换
+- ✏️ **行内编辑**：单元格级/行级编辑、撤销/重做、字段校验、批量编辑
+- 🔍 **多管道筛选**：搜索栏 + 表头筛选 + 列头搜索，三套独立管道协同工作
+- 🎨 **12 种内置渲染器**：text、number、date、tag、image、link、progress、avatar、action、index、currency、boolean，支持 `defineColumnType` 自定义扩展
+- 📊 **列管理**：拖拽排序列、列显隐/列宽调节，支持持久化到 localStorage
+- 📎 **Excel 导入导出**：支持 xlsx 导出/导入预览/模板下载（xlsx 按需动态加载）
+- ✅ **跨页多选**：跨页保持选中状态，支持全选所有页
+- 🔄 **工具栏**：刷新、密度切换、全屏、列设置、边框/斑马纹切换
+- 💾 **状态持久化**：列配置、分页、密度、筛选、排序自动持久化，可选 sessionStorage 或自定义 StorageAdapter
+- ⌨️ **键盘导航**：方向键行导航，支持 Enter/Space/Delete 等快捷键
+- 🎯 **TypeScript 全类型支持**：完整的 Props/Events/Slots/Methods 类型推导
+
+## 安装
+
+```bash
+npm install bw-pro-table
+```
+
+### 依赖要求
+
+| 依赖 | 版本 | 说明 |
+|------|------|------|
+| `vue` | `^3.3.0` | 核心框架 |
+| `ant-design-vue` | `^3.2.0 \|\| ^4.0.0` | UI 组件库 |
+| `@ant-design/icons-vue` | `^6.0.0 \|\| ^7.0.0` | 图标库 |
+| `dayjs` | `^1.11.0` | 日期处理 |
+
+**可选依赖**（按需安装）：
+
+| 依赖 | 说明 |
+|------|------|
+| `xlsx` | Excel 导入导出功能需要 |
+| `screenfull` | 全屏切换功能需要 |
+
+## 快速开始
+
+```vue
+<template>
+  <BwProTable
+    title="用户列表"
+    :columns="columns"
+    :request="fetchUsers"
+    :row-selection="rowSelection"
+  />
+</template>
+
+<script setup lang="ts">
+import { BwProTable } from 'bw-pro-table';
+import type { ProColumnsType } from 'bw-pro-table';
+
+interface User {
+  id: number;
+  name: string;
+  age: number;
+  email: string;
+  status: 'active' | 'inactive';
+  createdAt: string;
+}
+
+const columns: ProColumnsType<User> = [
+  { title: 'ID', dataIndex: 'id', width: 80, valueType: 'index' },
+  { title: '姓名', dataIndex: 'name', valueType: 'text', headerSearch: true },
+  { title: '年龄', dataIndex: 'age', valueType: 'number', sorter: true },
+  { title: '邮箱', dataIndex: 'email', valueType: 'link' },
+  {
+    title: '状态',
+    dataIndex: 'status',
+    valueType: 'tag',
+    valueEnum: {
+      active: { text: '启用', color: 'green' },
+      inactive: { text: '禁用', color: 'red' },
+    },
+  },
+  { title: '创建时间', dataIndex: 'createdAt', valueType: 'date' },
+];
+
+const fetchUsers = async (params: {
+  current: number;
+  pageSize: number;
+  [key: string]: any;
+}) => {
+  const res = await fetch('/api/users?' + new URLSearchParams(params));
+  const json = await res.json();
+  return { data: json.list, total: json.total, success: true };
+};
+
+const rowSelection = {
+  type: 'checkbox',
+  onChange: (keys: any[], rows: any[]) => {
+    console.log('选中:', keys, rows);
+  },
+};
+</script>
+```
+
+## API 文档
+
+### Props
+
+| 参数 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `columns` | `ProColumnsType` | **必填** | 列定义数组 |
+| `request` | `(params) => Promise<{data, total, success}>` | - | 异步数据请求函数，与 dataSource 互斥 |
+| `dataSource` | `any[]` | - | 静态数据源，与 request 互斥 |
+| `rowKey` | `string` | `'id'` | 行数据唯一标识字段名 |
+| `title` | `string` | - | 表格标题 |
+| `size` | `'small' \| 'middle' \| 'default'` | `'default'` | 表格尺寸 |
+| `pagination` | `false \| TablePaginationConfig` | `{}` | 分页配置，设为 false 禁用 |
+| `bordered` | `boolean` | `false` | 是否显示边框 |
+| `striped` | `boolean` | `false` | 是否显示斑马纹 |
+| `scroll` | `{ x?, y? }` | - | 表格滚动配置 |
+| `sticky` | `boolean \| { offsetHeader? }` | - | 表头固定 |
+| `search` | `false \| SearchConfig` | - | 搜索栏配置，false 隐藏 |
+| `toolbar` | `false \| ToolbarConfig` | - | 工具栏配置，false 隐藏 |
+| `tableId` | `string` | 随机生成 | 表格唯一标识，持久化必需 |
+| `cacheKey` | `string` | - | 持久化缓存键（与 tableId 二选一） |
+| `persistence` | `false \| PersistenceConfig` | - | 持久化配置 |
+| `editConfig` | `EditConfig` | - | 行内编辑配置 |
+| `dragConfig` | `DragConfig` | - | 列拖拽配置 |
+| `rowSelection` | `TableRowSelection` | - | 行选择配置 |
+| `crossPageSelection` | `false \| CrossPageSelectionConfig` | - | 跨页多选配置 |
+| `exportConfig` | `ExportConfig` | - | 导出配置 |
+| `importConfig` | `ImportConfig` | - | 导入配置 |
+| `viewConfig` | `ViewConfig` | - | 视图管理配置 |
+| `expandable` | `ExpandableConfig` | - | 行展开配置 |
+
+### Events
+
+| 事件 | 参数 | 说明 |
+|------|------|------|
+| `load` | `{ dataSource, total }` | 数据加载完成 |
+| `error` | `Error` | 数据加载失败 |
+| `change` | `(pagination, filters, sorter, extra)` | 表格变化（排序/筛选） |
+| `resizeColumn` | `(width, column)` | 列宽调整 |
+
+### Methods（通过 ref 调用）
+
+| 方法 | 说明 |
+|------|------|
+| `fetchData()` | 手动刷新数据 |
+| `getSelectedRowKeys()` | 获取当前页选中行 keys |
+| `getSelectedRows()` | 获取当前页选中行数据 |
+| `getDataSource()` | 获取当前数据源 |
+| `clearSelection()` | 清空跨页选择 |
+| `getCrossPageSelectedKeys()` | 获取跨页选中的 keys |
+| `getCrossPageSelectedRows()` | 获取跨页选中的行数据 |
+
+### Slots
+
+| 插槽名 | 说明 |
+|--------|------|
+| `search` | 自定义搜索栏 |
+| `toolbar` | 自定义工具栏 |
+| `toolbar-extra` | 工具栏左侧额外内容 |
+| 动态列插槽 | `bodyCell`、`headerCell` 等 ant-design-vue 原生插槽均支持 |
+
+## ProColumnType 列定义
+
+```ts
+interface ProColumnType<RecordType = any> extends ColumnType<RecordType> {
+  // === 值渲染 ===
+  valueType?: ValueType;           // 内置渲染器类型
+  valueEnum?: ValueEnumMap;        // 枚举值映射（tag 渲染）
+  customRender?: RenderFn;         // 自定义渲染函数
+
+  // === 搜索 ===
+  search?: boolean | SearchFieldConfig; // 搜索栏字段配置
+  headerSearch?: boolean;          // 列头搜索（仅 text 类型）
+
+  // === 编辑 ===
+  editable?: boolean;              // 是否可编辑
+  formRules?: FormRule[];          // 编辑校验规则
+  editComponent?: string | Component; // 自定义编辑组件
+  editProps?: Record<string, any>; // 编辑组件属性
+
+  // === 其他 ===
+  hidden?: boolean;                // 是否隐藏列
+  copyable?: boolean;              // 是否可复制
+  ellipsis?: boolean;              // 是否省略
+  tooltip?: string | Function;     // 提示
+}
+```
+
+## ValueType 内置渲染器
+
+| valueType | 说明 | 支持的额外属性 |
+|-----------|------|----------------|
+| `text` | 文本 | `copyable` |
+| `number` | 数字 | `precision` |
+| `date` | 日期 | `dateFormat` |
+| `currency` | 货币 | `precision`, `currencySymbol` |
+| `tag` | 标签 | `valueEnum` |
+| `image` | 图片 | `imageWidth`, `imageHeight` |
+| `link` | 链接 | `linkText` |
+| `progress` | 进度条 | - |
+| `avatar` | 头像 | `avatarSize` |
+| `boolean` | 布尔值 | `trueText`, `falseText` |
+| `action` | 操作列 | `actions` |
+| `index` | 序号列 | `indexOffset` |
+
+### 自定义 valueType
+
+```ts
+import { defineColumnType } from 'bw-pro-table';
+
+defineColumnType('customStatus', ({ text, record, column }) => {
+  return h('span', { style: { color: text === 'ok' ? 'green' : 'red' } }, text);
+});
+```
+
+## 搜索配置
+
+```vue
+<BwProTable
+  :columns="columns"
+  :search="{
+    labelWidth: 100,
+    collapsedRows: 3,
+    submitText: '查询',
+    resetText: '重置',
+  }"
+/>
+```
+
+列上标注可搜索字段：
+
+```ts
+{ title: '姓名', dataIndex: 'name', search: true }
+{ title: '状态', dataIndex: 'status', search: { label: '状态', widget: 'select', options: [...] } }
+```
+
+## 行内编辑
+
+```vue
+<BwProTable
+  :columns="columns"
+  :editConfig="{
+    mode: 'cell',           // 'cell' | 'row'
+    saveText: '保存',
+    cancelText: '取消',
+    deleteText: '删除',
+    addText: '新增行',
+    maxHistory: 20,
+    onSave: async (record) => {
+      await api.save(record);
+    },
+    onDelete: async (record) => {
+      await api.delete(record.id);
+    },
+  }"
+/>
+```
+
+列上标注可编辑字段：
+
+```ts
+{
+  title: '年龄',
+  dataIndex: 'age',
+  editable: true,
+  formRules: [
+    { required: true, message: '年龄不能为空' },
+    { type: 'number', min: 0, max: 150, message: '年龄范围 0-150' },
+  ],
+}
+```
+
+## 持久化配置
+
+```vue
+<BwProTable
+  tableId="user-table"
+  :persistence="{
+    enabled: true,
+    storage: 'localStorage',  // 'localStorage' | 'sessionStorage' | StorageAdapter
+    keyPrefix: 'my-app',
+    debug: false,
+    onError: (err, action) => console.warn('持久化错误:', err),
+  }"
+/>
+```
+
+支持的持久化范围：列显隐/顺序/宽度、分页大小、当前页码、密度、筛选、排序。
+
+## 导出/导入
+
+需要安装 `xlsx` 依赖：
+
+```bash
+npm install xlsx
+```
+
+```vue
+<BwProTable
+  :toolbar="{ export: true, import: true }"
+  :exportConfig="{
+    filename: '用户列表',
+    chunkSize: 5000,
+    columnMapping: { name: '姓名', age: '年龄' },
+  }"
+  :importConfig="{
+    validateRules: [{ required: true, message: '不能有空值' }],
+    onImport: async (data) => { await api.batchCreate(data); },
+    beforeImport: (data) => data.map(item => ({ ...item, source: 'import' })),
+  }"
+/>
+```
+
+## 跨页多选
+
+```vue
+<BwProTable
+  :row-selection="{ type: 'checkbox' }"
+  :cross-page-selection="{
+    enabled: true,
+    maxSelectCount: 100,
+    onSelectAllPages: async (params) => {
+      // Request 模式下返回所有匹配行的 key
+      const res = await api.getAllKeys(params);
+      return res.keys;
+    },
+  }"
+/>
+```
+
+## 从源码使用（开发）
+
+```ts
+import { BwProTable } from 'bw-pro-table';
+import 'bw-pro-table/dist/style.css';
+```
+
+## License
+
+MIT

package/dist/bw-pro-table.css

@@ -0,0 +1,2 @@
+.bw-pro-table-column-search[data-v-06f12966]{min-width:200px;padding:8px}.bw-pro-table-column-search .bw-pro-table-column-search-input[data-v-06f12966]{margin-bottom:8px}.bw-pro-table-column-search .bw-pro-table-column-search-actions[data-v-06f12966]{justify-content:flex-end;display:flex}.bw-pro-table-core[data-v-fcac0224] .ant-result{padding:48px 0}.bw-pro-table-core[data-v-fcac0224] .bw-pro-table-cell-overflow-ellipsis{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.bw-pro-table-core[data-v-fcac0224] .bw-pro-table-cell-overflow-wrap{white-space:normal;word-break:break-all;-webkit-line-clamp:3;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.bw-pro-table-core .bw-pro-table-header-cell[data-v-fcac0224]{justify-content:space-between;align-items:center;width:100%;display:flex}.bw-pro-table-core .bw-pro-table-header-left[data-v-fcac0224]{text-overflow:ellipsis;align-items:center;gap:4px;min-width:0;display:inline-flex;overflow:hidden}.bw-pro-table-core[data-v-fcac0224] .bw-pro-table-header-description-icon{color:#999;cursor:help;font-size:14px}.bw-pro-table-core[data-v-fcac0224] .bw-pro-table-row-selected{background-color:var(--ant-primary-1,#e6f4ff)!important}.bw-pro-table-core[data-v-fcac0224] .bw-pro-table-cell-error .ant-input,.bw-pro-table-core[data-v-fcac0224] .bw-pro-table-cell-error .ant-input-number,.bw-pro-table-core[data-v-fcac0224] .bw-pro-table-cell-error .ant-select-selector,.bw-pro-table-core[data-v-fcac0224] .bw-pro-table-cell-error .ant-picker{border-color:#ff4d4f!important}.bw-pro-table-core[data-v-fcac0224] .bw-pro-table-cell-error-msg{color:#ff4d4f;margin-top:4px;font-size:12px;line-height:1.5}.bw-pro-table-core[data-v-fcac0224] .bw-pro-table-header-drag-source{opacity:.45}.bw-pro-table-core[data-v-fcac0224] .bw-pro-table-header-drag-target{box-shadow:inset 2px 0 0 0 var(--ant-primary-color,#1890ff)}.bw-pro-table-core .bw-pro-table-header-drag-icon[data-v-fcac0224]{color:#bfbfbf;cursor:grab;flex-shrink:0;font-size:16px;transition:color .2s}.bw-pro-table-core .bw-pro-table-header-drag-icon[data-v-fcac0224]:hover{color:var(--ant-primary-color,#1890ff)}.bw-pro-table-core .bw-pro-table-header-drag-icon--active[data-v-fcac0224]{color:var(--ant-primary-color,#1890ff);cursor:grabbing}.bw-pro-table-search[data-v-d9ac96e6]{background:#fff;border-radius:8px;padding:24px 24px 0}.bw-pro-table-search .bw-pro-table-search-actions[data-v-d9ac96e6]{justify-content:flex-end;padding:16px;display:flex}.bw-pro-table-column-setting-panel[data-v-b6a8be46]{width:280px}.bw-pro-table-column-setting-header[data-v-b6a8be46]{border-bottom:1px solid #f0f0f0;justify-content:space-between;align-items:center;padding:12px 12px 8px;font-weight:600;display:flex}.bw-pro-table-column-setting-body[data-v-b6a8be46]{max-height:50vh;padding:4px 0;overflow-y:auto}.bw-pro-table-column-setting-item[data-v-b6a8be46]{cursor:default;align-items:center;gap:8px;padding:8px 12px;transition:background .15s;display:flex}.bw-pro-table-column-setting-item[data-v-b6a8be46]:hover{background:#fafafa}.bw-pro-table-column-setting-item--dragging[data-v-b6a8be46]{opacity:.45;background:#f0f0f0}.bw-pro-table-column-setting-item--drag-over[data-v-b6a8be46]{box-shadow:inset 0 2px 0 0 var(--ant-primary-color,#1890ff);background:#e6f7ff}.bw-pro-table-column-setting-item .bw-pro-table-column-drag-icon[data-v-b6a8be46]{color:#999;cursor:grab;flex-shrink:0;font-size:16px}.bw-pro-table-column-setting-item .bw-pro-table-column-drag-icon--active[data-v-b6a8be46]{color:var(--ant-primary-color,#1890ff);cursor:grabbing}.bw-pro-table-toolbar[data-v-127d79f2]{overflow:auto hidden}.bw-pro-table-toolbar .bw-pro-table-toolbar-container[data-v-127d79f2]{justify-content:space-between;align-items:center;height:64px;padding:0 24px;line-height:64px;display:flex}.bw-pro-table-toolbar .bw-pro-table-toolbar-left[data-v-127d79f2]{align-items:center;gap:16px;display:flex}.bw-pro-table-toolbar .bw-pro-table-toolbar-right[data-v-127d79f2]{align-items:center;display:flex}.bw-pro-table-toolbar .bw-pro-table-toolbar-title[data-v-127d79f2]{color:#000000d9;font-family:PingFangSC-Medium;font-size:16px}.bw-pro-table-toolbar .bw-pro-table-toolbar-selection-alert[data-v-127d79f2]{background:var(--ant-primary-1,#e6f4ff);border-bottom:1px solid var(--ant-primary-3,#91caff);justify-content:space-between;align-items:center;padding:8px 24px;font-size:14px;display:flex}.bw-pro-table-toolbar .bw-pro-table-toolbar-selection-alert .bw-pro-table-toolbar-selection-count[data-v-127d79f2]{color:#000000d9}.bw-pro-table[data-v-5a0b5c48]{background:#fff;border-radius:8px}.bw-pro-table[data-v-5a0b5c48] .bw-pro-table-row-striped{background:#f5f5f5}.bw-pro-table[data-v-5a0b5c48] .bw-pro-table-row-selected{background-color:var(--ant-primary-1,#e6f4ff)!important}
+/*$vite$:1*/