@wg-song/bare 0.1.0

package/AGENTS.md

@@ -0,0 +1,241 @@
+# AGENTS.md — @wg-song/bare 使用指南
+
+本文件面向 AI Agent，帮助 AI 在**不阅读源码**的情况下，正确使用 `@wg-song/bare` 业务组件库完成业务功能开发。
+
+## 1. 角色与目标
+
+你是业务前端开发助手。当前项目已接入 `@wg-song/bare`（Vue3 业务组件库，基于 Ant Design Vue + vxe-table）。
+
+你的任务：使用本库提供的组件、hooks、工具函数完成业务页面开发，**不要自己从零封装通用组件**。
+
+## 2. 基础接入（已默认完成）
+
+接入项目的 `main.ts` 通常已包含：
+
+```ts
+import BareComponents from '@wg-song/bare'
+import '@wg-song/bare/index.css'
+
+app.use(BareComponents)
+```
+
+因此业务页面中直接使用组件即可，无需再次安装或注册。
+
+## 3. 组件选择速查表
+
+| 业务场景 | 推荐组件 / API | 不推荐 |
+|---|---|---|
+| 普通表单（新增/编辑） | `Form` + `useForm` | 手写 `<a-form>` |
+| 搜索区 + 表格 | `SearchForm` + `Table` | 手写搜索 + 表格 |
+| 完整列表页（搜索/工具栏/分页） | `PageShell` 或 `PageList` | 用多个组件拼装 |
+| 只读表格展示 | `TableRead` | `Table` 手动配置只读 |
+| 行内编辑表格 | `TableEdit` | 手写单元格编辑 |
+| 父子表/嵌套表格 | `TableChild` | 手写嵌套逻辑 |
+| 分组统计表格 | `TableGroup` / `TableGroupPage` | 手写分组 |
+| 弹窗表单 | `DialogForm` | 手写 `<a-modal>` + 表单 |
+| 命令式确认提示 | `confirm` / `alert` | 手写 Modal |
+| 命令式弹窗/抽屉 | `openModal` / `openDrawer` | 手写 createVNode + render |
+| 页签切换 | `Tabs` / `TabsView` / `PageTabs` | 手写 `<a-tabs>` |
+| 标签页 + 列表组合 | `PageListTabs` | 手写多个列表页切换 |
+| 分割布局 | `SplitPane` / `SplitPaneLayout` | 手写 CSS 分割 |
+| 表格行操作/工具栏 | `ToolbarActionBar` / `ToolbarActionButtonMenu` | 手写按钮组 |
+
+## 4. 标准代码模板
+
+### 4.1 表单页面
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Form } from '@wg-song/bare'
+import type { FormField } from '@wg-song/bare'
+
+const schemas: FormField[] = [
+  { field: 'name', label: '名称', component: 'input', required: true },
+  { field: 'status', label: '状态', component: 'select', options: [
+    { label: '启用', value: 1 },
+    { label: '禁用', value: 0 },
+  ]},
+]
+
+const model = ref({ name: '', status: 1 })
+
+function onSubmit(values: Record<string, any>) {
+  console.log(values)
+}
+</script>
+
+<template>
+  <Form v-model="model" :schemas="schemas" @submit="onSubmit" />
+</template>
+```
+
+### 4.2 搜索 + 表格
+
+```vue
+<script setup lang="ts">
+import { SearchForm, Table } from '@wg-song/bare'
+import type { FormField, TableColumn } from '@wg-song/bare'
+
+const searchSchemas: FormField[] = [
+  { field: 'keyword', label: '关键词', component: 'input' },
+]
+
+const columns: TableColumn[] = [
+  { field: 'name', title: '名称' },
+  { field: 'status', title: '状态' },
+]
+
+const data = [{ name: '示例', status: '启用' }]
+</script>
+
+<template>
+  <SearchForm :schemas="searchSchemas" />
+  <Table :columns="columns" :data="data" />
+</template>
+```
+
+### 4.3 列表页（推荐）
+
+```vue
+<script setup lang="ts">
+import { PageShell } from '@wg-song/bare'
+import type { FormField, PageShellProps, ActionItem } from '@wg-song/bare'
+
+const searchSchemas: FormField[] = [
+  { field: 'keyword', label: '关键词', component: 'input' },
+]
+
+const toolbarActions: ActionItem[] = [
+  { label: '新增', onClick: () => {} },
+]
+
+const loader: PageShellProps['loader'] = async ({ query, currentPage, pageSize }) => {
+  // 调用业务 API
+  return { list: [], total: 0 }
+}
+</script>
+
+<template>
+  <PageShell
+    :search-schemas="searchSchemas"
+    :loader="loader"
+    :toolbar-actions="toolbarActions"
+  >
+    <template #default="{ tableData, loading }">
+      <!-- 渲染表格或其他内容 -->
+    </template>
+  </PageShell>
+</template>
+```
+
+### 4.4 弹窗表单
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { DialogForm } from '@wg-song/bare'
+import type { FormField } from '@wg-song/bare'
+
+const open = ref(false)
+const schemas: FormField[] = [
+  { field: 'name', label: '名称', component: 'input', required: true },
+]
+</script>
+
+<template>
+  <DialogForm v-model:open="open" :schemas="schemas" title="新增" @submit="console.log" />
+</template>
+```
+
+### 4.5 命令式弹窗
+
+```ts
+import { confirm, openModal } from '@wg-song/bare'
+
+async function handleDelete() {
+  const ok = await confirm('确认删除', '删除后不可恢复')
+  if (ok) {
+    // 执行删除
+  }
+}
+
+function handleDetail(row: any) {
+  openModal(DetailComponent, { title: '详情', data: row })
+}
+```
+
+## 5. 类型导入清单
+
+```ts
+import type {
+  // 表单
+  FormField,
+  FormProps,
+  FormActionType,
+  FormContext,
+  SearchFormProps,
+  SearchFormInstance,
+  DialogFormProps,
+
+  // 表格
+  TableColumn,
+  TableProps,
+  TableActionType,
+  TableReadProps,
+  TableEditColumn,
+  TableChildProps,
+  TableGroupProps,
+
+  // 列表页
+  PageShellProps,
+  PageListProps,
+  PageListConfig,
+  PageListRowActions,
+  PageListOptions,
+  PageListFetchFn,
+  ActionItem,
+
+  // 弹窗
+  ModalContext,
+  ModalProps,
+  DrawerProps,
+
+  // 标签页
+  TabsProps,
+  TabsViewTab,
+  PageTabsProps,
+  PageListTabsProps,
+} from '@wg-song/bare'
+```
+
+## 6. 重要约定
+
+1. **优先使用场景组件**：需要列表页时直接用 `PageShell`/`PageList`，不要手动拼装 `SearchForm + Table + Pagination`。
+2. **表单用 Schema 驱动**：使用 `FormField` 数组描述表单，避免手写大量 `<a-form-item>`。
+3. **表格列用 `TableColumn` 数组**：通过 `field`、`title`、`formatType` 等属性配置列，避免手写 `<vxe-column>`。
+4. **命令式弹窗直接用 `confirm` / `openModal`**：无需手动维护 Modal 的显示状态和 DOM。
+5. **类型从 `@wg-song/bare` 导入**：不要从源码路径或 `dist` 目录导入类型。
+6. **样式已全局引入**：业务页面不需要再单独引入组件样式。
+
+## 7. 常见错误避免
+
+- ❌ `import { Form } from '@wg-song/bare/dist/...'` — 应从 `@wg-song/bare` 根导入。
+- ❌ 在业务页面手写 `<a-form>` 表单 — 应使用 `Form` 组件。
+- ❌ 手动维护 `vxe-table` 实例 — 应使用 `Table` / `TableRead` / `TableEdit`。
+- ❌ 自己写 Modal 的显示逻辑 — 应使用 `DialogForm` / `confirm` / `openModal`。
+- ❌ 从 `@packages` 导入 — 业务应用应使用构建产物包名 `@wg-song/bare`。
+
+## 8. 全局配置
+
+如需在 `main.ts` 中传入全局默认配置：
+
+```ts
+app.use(BareComponents, {
+  globalConfig: {
+    table: { /* Table 默认配置 */ },
+    pageList: { /* PageList 默认配置 */ },
+    colPref: { /* 列偏好设置默认配置 */ },
+  },
+})
+```

package/README.md

@@ -0,0 +1,248 @@
+# @wg-song/bare — Vue3 业务组件库
+
+基于 **Vue 3 + Ant Design Vue + vxe-table** 的业务组件库，提供表单、表格、列表页、弹窗、标签页等高频业务场景组件。
+
+## 安装
+
+```bash
+pnpm add @wg-song/bare
+```
+
+Peer dependencies（需由接入应用提供）：
+
+```json
+{
+  "vue": "^3.0.0",
+  "ant-design-vue": "^4.0.0",
+  "vxe-table": "^4.0.0",
+  "vxe-pc-ui": "^4.0.0",
+  "@ant-design/icons-vue": "^7.0.0",
+  "vue-router": "^4.0.0"
+}
+```
+
+## 快速开始
+
+在 `main.ts` 中安装：
+
+```ts
+import { createApp } from 'vue'
+import BareComponents from '@wg-song/bare'
+import '@wg-song/bare/index.css'
+
+const app = createApp(App)
+app.use(BareComponents)
+app.mount('#app')
+```
+
+> 注意：若使用本库内置的 Vite 应用演示工程，安装时已自动调用 `setupModal(app._context)`，接入方无需手动处理命令式弹窗上下文。
+
+## 组件总览
+
+### 表单 Form
+
+| 组件 / API | 说明 |
+|---|---|
+| `Form` | Schema 驱动表单 |
+| `SearchForm` | 搜索表单（含高级搜索、FilterBar） |
+| `SearchFormSimple` | 简易单行搜索 |
+| `DialogForm` | 弹窗表单场景 |
+| `useForm` | 表单核心 hook |
+| `useSearchForm` | 搜索表单 hook |
+
+### 表格 Table
+
+| 组件 / API | 说明 |
+|---|---|
+| `Table` | 基础 vxe-table 封装 |
+| `TableRead` | 只读表格（固定操作列等） |
+| `TableEdit` | 行内编辑表格 |
+| `TableChild` | 父子表格 |
+| `TableGroup` / `TableGroupPage` | 分组表格 |
+| `Pagination` | 分页 |
+
+### 列表页 PageList
+
+| 组件 / API | 说明 |
+|---|---|
+| `PageList` | 完整列表页 |
+| `PageShell` | 列表页外壳（搜索 + 工具栏 + 表格插槽 + 分页） |
+| `PageEditList` | 可编辑列表页 |
+| `PageChildList` | 子列表页 |
+| `usePageList` | 列表页逻辑 hook |
+| `definePageList` / `defineLoader` | 列表页配置定义 |
+
+### 弹窗 Modal
+
+| 组件 / API | 说明 |
+|---|---|
+| `Modal` / `Drawer` | 声明式弹窗/抽屉 |
+| `openModal` / `openDrawer` | 命令式打开弹窗/抽屉 |
+| `confirm` / `alert` | 命令式确认/提示 |
+| `PageModals` | 页面级弹窗管理器 |
+
+### 标签页 Tabs
+
+| 组件 / API | 说明 |
+|---|---|
+| `Tabs` | 基础标签页 |
+| `TabsView` / `PageTabs` | 页签视图 |
+| `PageListTabs` | 标签页 + 列表组合 |
+| `useTabState` / `useTabbedList` | 标签页状态 hook |
+
+### 布局与原子组件
+
+| 组件 / API | 说明 |
+|---|---|
+| `SplitPane` / `SplitPaneLayout` | 分割面板 |
+| `ToolbarActionBar` / `ToolbarActionButtonMenu` | 表格工具栏操作 |
+| `Button`、`Input`、`Select`、`Tag`、`Link` 等 | 字段级原子组件（同样从 `@wg-song/bare` 导入） |
+
+## 核心使用模式
+
+### 1. Schema 表单
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Form } from '@wg-song/bare'
+import type { FormField } from '@wg-song/bare'
+
+const schemas: FormField[] = [
+  { field: 'name', label: '名称', component: 'input', required: true },
+  { field: 'status', label: '状态', component: 'select', options: [
+    { label: '启用', value: 1 },
+    { label: '禁用', value: 0 },
+  ]},
+]
+
+const model = ref({ name: '', status: 1 })
+
+function onSubmit(values: Record<string, any>) {
+  console.log(values)
+}
+</script>
+
+<template>
+  <Form v-model="model" :schemas="schemas" @submit="onSubmit" />
+</template>
+```
+
+### 2. 搜索表单 + 表格
+
+```vue
+<script setup lang="ts">
+import { SearchForm, Table } from '@wg-song/bare'
+import type { FormField, TableColumn } from '@wg-song/bare'
+
+const searchSchemas: FormField[] = [
+  { field: 'keyword', label: '关键词', component: 'input' },
+]
+
+const columns: TableColumn[] = [
+  { field: 'name', title: '名称' },
+  { field: 'status', title: '状态' },
+]
+
+const data = [
+  { name: '示例', status: '启用' },
+]
+</script>
+
+<template>
+  <SearchForm :schemas="searchSchemas" />
+  <Table :columns="columns" :data="data" />
+</template>
+```
+
+### 3. 列表页（推荐）
+
+```vue
+<script setup lang="ts">
+import { PageShell } from '@wg-song/bare'
+import type { FormField, PageShellProps } from '@wg-song/bare'
+
+const searchSchemas: FormField[] = [
+  { field: 'keyword', label: '关键词', component: 'input' },
+]
+
+const loader: PageShellProps['loader'] = async ({ query, currentPage, pageSize }) => {
+  // 调用接口
+  return { list: [], total: 0 }
+}
+
+const toolbarActions = [
+  { label: '新增', onClick: () => {} },
+]
+</script>
+
+<template>
+  <PageShell :search-schemas="searchSchemas" :loader="loader" :toolbar-actions="toolbarActions">
+    <template #default="{ tableData, loading }">
+      <!-- 渲染具体表格场景 -->
+    </template>
+  </PageShell>
+</template>
+```
+
+### 4. 命令式弹窗
+
+```ts
+import { confirm, openModal } from '@wg-song/bare'
+
+async function onDelete() {
+  const ok = await confirm('确认删除', '删除后不可恢复')
+  if (ok) {
+    // 执行删除
+  }
+}
+
+function onOpen() {
+  openModal(MyComponent, { title: '详情', data: row })
+}
+```
+
+## 全局配置
+
+通过 `app.use(BareComponents, { globalConfig })` 传入：
+
+```ts
+app.use(BareComponents, {
+  globalConfig: {
+    table: { /* Table 默认配置 */ },
+    pageList: { /* PageList 默认配置 */ },
+    colPref: { /* 列偏好设置默认配置 */ },
+  },
+})
+```
+
+## 类型导入
+
+```ts
+import type {
+  FormField,
+  FormProps,
+  TableColumn,
+  TableProps,
+  PageShellProps,
+  ActionItem,
+} from '@wg-song/bare'
+```
+
+## 构建产物
+
+`pnpm build:bare` 输出到 `dist/packages/`：
+
+- `index.mjs` — ESM 主入口
+- `index.cjs` — CommonJS 入口
+- `index.umd.js` — UMD 入口
+- `index.css` — 样式
+- `types.d.ts` — TypeScript 类型声明
+- `README.md` / `AGENTS.md` — 使用文档与 AI 指南
+- `package.json`
+
+本地联调可在其他项目中：
+
+```json
+"@wg-song/bare": "file:../songwg-business-components/dist/packages"
+```

package/assets/groupWorker-CVKwfaLo.js

@@ -0,0 +1,212 @@
+(function() {
+	const y = "\0", R = "__root__", $ = String.fromCharCode(0);
+	function I(a) {
+		return a.replace(/\\/g, "\\\\").replace(new RegExp($, "g"), "\\0").replace(/:/g, "\\:");
+	}
+	function N(a, s) {
+		return a == null ? s : String(a);
+	}
+	function S(a, s, c, n) {
+		const l = a ?? n, r = s ?? n;
+		let o = 0;
+		if (typeof l == "number" && typeof r == "number") o = l - r;
+		else if (typeof l == "bigint" && typeof r == "bigint") o = l < r ? -1 : l > r ? 1 : 0;
+		else if (typeof l == "string" && typeof r == "string") o = l.localeCompare(r, "zh-CN", { numeric: !0 });
+		else {
+			const t = (e) => typeof e == "number" ? 0 : typeof e == "bigint" ? 1 : typeof e == "string" ? 2 : 3;
+			o = t(l) - t(r), o === 0 && (o = String(l).localeCompare(String(r), "zh-CN", { numeric: !0 }));
+		}
+		return c === "desc" ? -o : o;
+	}
+	function h(a, s) {
+		return a[s];
+	}
+	function M(a, s, c) {
+		const n = /* @__PURE__ */ new Map(), l = [];
+		for (const r of a) {
+			const o = s.map((u) => {
+				const d = r[u.field];
+				return {
+					fieldKey: u.field,
+					value: N(d, c),
+					rawValue: d
+				};
+			}), t = o.map((u) => `${u.fieldKey}:${I(u.value)}`).join(y);
+			let e = n.get(t);
+			e || (e = {
+				parts: o,
+				rows: []
+			}, n.set(t, e), l.push(e)), e.rows.push(r);
+		}
+		return l;
+	}
+	function k(a, s, c) {
+		a.sort((n, l) => {
+			for (let r = 0; r < s.length; r++) {
+				const o = S(n.parts[r].rawValue, l.parts[r].rawValue, s[r].sort ?? "asc", c);
+				if (o !== 0) return o;
+			}
+			return 0;
+		});
+	}
+	function v(a, s, c) {
+		const n = [], l = [], r = /* @__PURE__ */ new Map();
+		if (s.length === 0) {
+			for (const t of a) for (const e of t.rows) n.push({
+				...e,
+				_nodeId: `data::::${h(e, c)}`,
+				_rowType: "data",
+				_groupDepth: 0,
+				_parentNodeId: "",
+				_sourceRowId: h(e, c)
+			});
+			return {
+				nodes: n,
+				groupNodeIds: l
+			};
+		}
+		const o = [];
+		for (const t of a) {
+			let e = 0;
+			for (; e < o.length && e < s.length && o[e]._groupFieldKey === t.parts[e].fieldKey && o[e]._groupValue === t.parts[e].value;) e++;
+			for (; o.length > e;) o.pop();
+			for (let d = e; d < s.length; d++) {
+				const p = s[d], g = t.parts[d], f = d === 0 ? void 0 : o[d - 1], i = f?._nodeId ?? "", w = i || R, _ = r.get(w) ?? 0;
+				r.set(w, _ + 1);
+				const b = {
+					_nodeId: `group::${i}::${p.field}::${_}`,
+					_rowType: "group",
+					_groupDepth: d,
+					_parentNodeId: f?._nodeId,
+					_groupFieldKey: p.field,
+					_groupLabel: p.label,
+					_groupValue: g.value,
+					_groupCount: 0
+				};
+				o.push(b), n.push(b), l.push(b._nodeId);
+			}
+			const u = o[s.length - 1];
+			for (const d of t.rows) {
+				for (const p of o) p._groupCount = p._groupCount + 1;
+				n.push({
+					...d,
+					_nodeId: `data::${u._nodeId}::${h(d, c)}`,
+					_rowType: "data",
+					_groupDepth: s.length,
+					_parentNodeId: u._nodeId,
+					_sourceRowId: h(d, c)
+				});
+			}
+		}
+		return {
+			nodes: n,
+			groupNodeIds: l
+		};
+	}
+	function z(a, s) {
+		const c = [], n = /* @__PURE__ */ new Map(), l = /* @__PURE__ */ new Map();
+		for (const r of a) {
+			let o, t = "";
+			for (let e = 0; e < s.length; e++) {
+				const u = s[e], d = r.parts[e], p = t ? `${t}${y}${u.field}:${I(d.value)}` : `${u.field}:${I(d.value)}`;
+				let g = n.get(p);
+				if (!g) {
+					const f = l.get(t) ?? 0;
+					l.set(t, f + 1), g = {
+						nodeId: p,
+						fieldKey: u.field,
+						label: u.label,
+						value: d.value,
+						rawValue: d.rawValue,
+						depth: e,
+						children: [],
+						rows: [],
+						parent: o,
+						size: 0,
+						firstRowIndex: -1
+					}, n.set(p, g), o ? o.children.push(g) : c.push(g);
+				}
+				o = g, t = p;
+			}
+			o && o.rows.push(...r.rows);
+		}
+		return c;
+	}
+	function m(a, s) {
+		let c = 0;
+		for (const n of a) n.firstRowIndex = s + c, n.children.length > 0 ? n.size = m(n.children, s + c) : n.size = n.rows.length, c += n.size;
+		return c;
+	}
+	function C(a, s, c) {
+		const n = [];
+		if (s.length === 0) {
+			for (const t of a.flatMap((e) => e.rows)) n.push({
+				...t,
+				_nodeId: `data::::${h(t, c)}`,
+				_rowType: "data",
+				_groupDepth: 0,
+				_parentNodeId: "",
+				_sourceRowId: h(t, c),
+				_groupSpans: []
+			});
+			return n;
+		}
+		let l = 0;
+		function r(t, e, u = {}) {
+			const d = e.map((i) => ({
+				depth: i.depth,
+				fieldKey: i.fieldKey,
+				label: i.label,
+				value: i.value,
+				size: i.size,
+				isStart: i.firstRowIndex === l,
+				nodeId: i.nodeId
+			})), p = e[e.length - 1], g = u.isFoldedHeader ? `folded:${p?.nodeId ?? "unknown"}` : h(t, c), f = `data::${u.isFoldedHeader ? "folded" : p?.nodeId ?? "flat"}::${g}`;
+			return {
+				...t,
+				_nodeId: f,
+				_rowType: "data",
+				_groupDepth: s.length,
+				_parentNodeId: p?.nodeId ?? "",
+				_sourceRowId: g,
+				_groupSpans: d,
+				_isFoldedHeader: u.isFoldedHeader
+			};
+		}
+		function o(t, e) {
+			for (const u of t) {
+				const d = [...e, u];
+				if (u.children.length > 0) {
+					o(u.children, d);
+					continue;
+				}
+				for (const p of u.rows) n.push(r(p, d)), l++;
+			}
+		}
+		return o(a, []), n;
+	}
+	function T(a) {
+		const { id: s, rows: c, fields: n, mode: l, fallbackText: r, rowKeyField: o } = a.data, t = n.slice(0, 5), e = M(c, t, r);
+		k(e, t, r);
+		let u = [], d = [];
+		if (l === "rowspan") {
+			let i = function(w) {
+				for (const _ of w) d.push(_.nodeId), i(_.children);
+			};
+			const f = z(e, t);
+			m(f, 0), u = C(f, t, o), i(f);
+		} else {
+			const f = v(e, t, o);
+			u = f.nodes, d = f.groupNodeIds;
+		}
+		const p = {
+			id: s,
+			flatRows: u,
+			groupNodeIds: d
+		};
+		self.postMessage(p);
+	}
+	self.onmessage = (a) => {
+		T(a);
+	};
+})();