diff --git a/code/fms/.codebuddy/plans/fms-table-column-type-auto-renderer_d5fad477.md b/code/fms/.codebuddy/plans/fms-table-column-type-auto-renderer_d5fad477.md new file mode 100644 index 00000000..5e1f5028 --- /dev/null +++ b/code/fms/.codebuddy/plans/fms-table-column-type-auto-renderer_d5fad477.md @@ -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 使用原生 `