20260725172954

2026-07-25 17:29:54 +08:00
1 parent 1b86e0043a
commit e3c7c6f8da
@@ -0,0 +1,77 @@
+---
+name: fms-table-column-type-auto-renderer
+overview: 在 FmsTable 内部根据列的 type 属性自动生成 customCell 渲染器，让面板只需声明 type（checkbox/actions）而不必手写 h() 渲染函数。
+todos:
+  - id: impl-actions-renderer
+    content: 实现 createActionsCellRenderer.js，导出 createActionsCell(actions) 函数，支持声明式操作按钮配置（原生 button + Modal.confirm）
+    status: completed
+  - id: enhance-fmstable-columns
+    content: 增强 FmsTable.vue 的 displayColumns computed，根据 column.type 自动注入 checkbox / actions 的 customCell 渲染器
+    status: completed
+    dependencies:
+      - impl-actions-renderer
+  - id: simplify-powers-panel
+    content: 简化 ModulePowersPanel.vue，移除 CanUseCell 和 ActionsCell 渲染函数及 .pw-checkbox 样式，改用 type 声明
+    status: completed
+    dependencies:
+      - enhance-fmstable-columns
+  - id: simplify-i18n-panel
+    content: 简化 ModuleI18nPanel.vue，移除 ActionsCell 渲染函数及 h 导入，改用 type 声明
+    status: completed
+    dependencies:
+      - enhance-fmstable-columns
+---
+
+## 用户需求
+
+简化 FmsTable 的列定义方式。当前调用方（ModulePowersPanel、ModuleI18nPanel 等）需要在每个需要特殊渲染的列上手动编写 `customCell` 渲染函数，导致大量重复的 checkbox 和操作按钮渲染逻辑散落在各个面板中。
+
+## 核心功能
+
+- **`type: "checkbox"` 列自动渲染**：列定义只需声明 `type: "checkbox"`，FmsTable 自动注入原生 checkbox 渲染器。切换时自动 `row[dataIndex] = checked ? 1 : 0`，然后调用 `column.onChange?.()` 通知父组件
+- **`type: "actions"` 列自动渲染**：列定义声明 `type: "actions"` 并配置 `actions: [{ type, label, confirm?, onClick(row) }]` 数组，FmsTable 通过 `createActionsCellRenderer.js` 自动生成操作按钮
+- **无 `type` 列保持默认**：不传 `type` 的列维持 stk-table 原生文本渲染
+- **特殊列保留 `customCell`**：I18nKeyCell（多语言键列：文本 + 翻译 icon 按钮组合）过于特殊，保持原有 `customCell` 方式
+
+## 技术方案
+
+### 实现策略
+
+核心思路：在 `FmsTable.vue` 的 `displayColumns` computed 中对用户传入的 columns 做一层增强映射——检测 `type` 属性，为 `checkbox` / `actions` 类型的列自动注入 `customCell` 渲染函数。父组件只需声明类型和配置，无需关心渲染细节。
+
+### 关键设计决策
+
+1. **checkbox 渲染复用 `.fms-checkbox` 全局样式**：和选择列共用同一套 CSS，零新增样式。外观与 antdv-next Checkbox 一致（蓝色背景 + 白色勾）
+2. **actions 渲染独立到 `createActionsCellRenderer.js`**：操作列逻辑较复杂（多按钮、confirm 弹窗），独立文件便于扩展。每个 action 使用原生 `<button>` 元素，不创建 antdv 组件实例
+3. **类型处理在 `displayColumns` 中进行**：在传给 stk-table 之前的最后一刻做增强，不影响父组件的 columns 引用。`onColumnsUpdate` 回传时不会带出内部注入的 `customCell`
+4. **性能零退化**：所有注入的渲染器均使用原生 DOM（`h("label")` / `h("input")` / `h("button")`），不创建 Vue 组件实例，与当前性能优化方向完全一致
+
+### 实现细节
+
+**`createActionsCellRenderer.js`**
+
+- 导出 `createActionsCell(actions)`，接收 `[{ type, label, confirm?, onClick(row) }]` 数组
+- 返回 `({ row }) => VNode` 渲染函数
+- 每个 action 渲染为原生 `<button>`，内联红色文字样式
+- `confirm` 存在时，点击先弹出 `Modal.confirm`，确认后调用 `onClick(row)`
+- 按钮容器为 flex 布局，间距 4px
+
+**`FmsTable.vue` 中的 `displayColumns` 增强**
+
+- 在 `[...props.columns]` 的基础上做 `.map()`，对每列检查 `type`
+- `type === "checkbox"` → 注入 checkbox 渲染器（复用 `.fms-checkbox` 样式，`cellValue === 1` 时添加 `checked` 类）
+- `type === "actions"` → 调用 `createActionsCell(col.actions)` 注入
+- 其余列原样透传
+
+**ModulePowersPanel.vue 简化**
+
+- 删除 `CanUseCell`（157-180 行）和 `ActionsCell`（183-211 行）渲染函数
+- `b_canuse` 列改为：`{ ..., type: "checkbox", onChange: () => emitUpdate() }`
+- `actions` 列改为：`{ ..., type: "actions", actions: [{ type: "delete", label: "删除", confirm: "确定删除该记录？", onClick: (row) => deleteRow(row) }] }`
+- 删除 `.pw-checkbox` 全局样式块（281-328 行），checkbox 样式由 FmsTable 的 `.fms-checkbox` 接管
+
+**ModuleI18nPanel.vue 简化**
+
+- 删除 `ActionsCell` 渲染函数（177-206 行）
+- `actions` 列改为：`{ ..., type: "actions", actions: [{ type: "delete", label: "删除", confirm: "确定删除该记录（含其全部语言）？", onClick: (row) => deleteRow(row) }] }`
+- 移除 `h` 导入（不再使用）