20260723225202
This commit is contained in:
oneao committed
1 parent
5f73b54802
commit
4d118a0037
22 files changed
+1403
-259
No files matched your search
@@ -0,0 +1,96 @@
|
||||
---
|
||||
name: checkbox-cell-unified-config
|
||||
overview: "将模块管理各面板中的 checkbox 列从 `customCell: createCheckboxCell(...)` 重构为声明式 `editor: { type: \"checkbox\" }`，由 FmsTable 在显示态与编辑态都渲染可交互的 checkbox，面板不再手动导入渲染器。按钮（删除）暂不动，用户仍在考虑。"
|
||||
todos:
|
||||
- id: make-checkbox-always-interactive
|
||||
content: 在 createEditableCellRenderer.js 中将 checkbox 分支独立为始终可交互，复用 update 回调
|
||||
status: completed
|
||||
- id: update-panels-checkbox
|
||||
content: 将 4 个面板 5 处 checkbox 列改为 editor:{type:'checkbox',onChange}，并删除 createCheckboxCell 导入
|
||||
status: completed
|
||||
dependencies:
|
||||
- make-checkbox-always-interactive
|
||||
- id: remove-dead-renderers
|
||||
content: 从 createCellRenderers.js 删除 createCheckboxCell 与 createSelectCell 死代码
|
||||
status: completed
|
||||
dependencies:
|
||||
- update-panels-checkbox
|
||||
- id: verify-no-residual
|
||||
content: 全局搜索确认无 createCheckboxCell/createSelectCell 残留引用，并运行 read_lints
|
||||
status: completed
|
||||
dependencies:
|
||||
- remove-dead-renderers
|
||||
---
|
||||
|
||||
## 用户需求
|
||||
|
||||
重构表格单元格渲染方式：对于布尔型字段（如 `b_visible`、`b_canuse`、`b_sortable`），在列配置里直接声明 `editor: { type: "checkbox" }` 即可，显示态与编辑态均为可直接点击的 checkbox，无需面板自己 import 并调用 `createCheckboxCell`。
|
||||
|
||||
## 核心要点
|
||||
|
||||
- checkbox 类列（共 5 处，跨越 4 个面板）从 `customCell: createCheckboxCell(...)` 改为声明式 `editor: { type: "checkbox", onChange: () => emitUpdate() }`。
|
||||
- 表格组件内部让 `checkbox` 类型始终可交互（显示态也是可点击 checkbox），不再区分编辑/非编辑态；值按 `col.dataIndex` 自动读写，默认 `checkedValue=1 / uncheckedValue=0`，与现有 1/0 布尔存储一致。
|
||||
- 删除按钮等 `createDeleteCell` 本次不重构，保持 `customCell` 现状（用户仍在考虑按钮方案）。
|
||||
- 重构后 `createCheckboxCell` 不再被任何面板引用，从 `createCellRenderers.js` 中移除；`createSelectCell` 已是死代码一并移除。
|
||||
|
||||
## 技术栈与既有模式
|
||||
|
||||
- 前端：Vue 3 `<script setup>` + Ant Design Vue（antdv-next）+ StkTable（`stk-table-vue`）。
|
||||
- 列渲染统一由 `FmsTable.vue` 封装：`column.editor && !column.customCell` 的列会被自动包成 `EditableCell`（`createEditableCellRenderer` 产物），业务面板只声明 `editor`，不直接写 `customCell`。
|
||||
- `EditableCell` 当前已支持 `editor.type === "checkbox"`，但非编辑态渲染为只读静态 checkbox（`pointer-events: none`），编辑态才渲染可交互 checkbox。
|
||||
|
||||
## 实现方案
|
||||
|
||||
### 1. 让 `EditableCell` 的 checkbox 始终可交互（核心改动）
|
||||
|
||||
文件：`fms-vue/src/components/fms-table/utils/createEditableCellRenderer.js`
|
||||
|
||||
- 将 checkbox 分支从 `if (!isEditing)` 中抽出，放在最前面独立处理，忽略 `isEditing`：
|
||||
- 读取 `checkedValue = editor.checkedValue ?? 1`、`uncheckedValue = editor.uncheckedValue ?? 0`。
|
||||
- 渲染 `h(Checkbox, { checked: cellValue === checkedValue, disabled: resolveOption(editor.disabled, row), onClick: e => e.stopPropagation(), "onUpdate:checked": (checked) => { const v = checked ? checkedValue : uncheckedValue; row[col.dataIndex] = v; editor.onChange?.(v, row, col); } })`。
|
||||
- 复用现有 `update` 逻辑（已做 `row[col.dataIndex] = value; editor.onChange?.(value, row, col)`），保持与 select/number 一致的行为。
|
||||
- `if (!isEditing)` 分支内移除 checkbox 的静态处理，仅保留 select 文本展示与默认文本展示。
|
||||
|
||||
理由：最少量改动实现"显示=编辑=可交互 checkbox"，且复用同一套 `update`/脏数据回调，不改 `FmsTable.vue` 包裹逻辑。
|
||||
|
||||
### 2. 面板列配置改造（4 个文件，5 处）
|
||||
|
||||
将每处：
|
||||
|
||||
```js
|
||||
customCell: createCheckboxCell("b_canuse", (row, field, value) => { row[field] = value; emitUpdate(); }),
|
||||
```
|
||||
|
||||
改为：
|
||||
|
||||
```js
|
||||
editor: { type: "checkbox", onChange: () => emitUpdate() },
|
||||
```
|
||||
|
||||
涉及：
|
||||
|
||||
- `ModuleListConfigPanel.vue`：`b_visible`、`b_sortable` 两列（删除 `import { createCheckboxCell } ...`）。
|
||||
- `ModuleFieldsPanel.vue`：`b_canuse` 列（删除 `import { createCheckboxCell } ...`）。
|
||||
- `ModulePowersPanel.vue`：`b_canuse` 列（删除 `import { createCheckboxCell } ...`）。
|
||||
- `ModuleQueryConfigPanel.vue`：`b_canuse` 列（删除 `import { createCheckboxCell } ...`）。
|
||||
说明：表格按 `col.dataIndex`（如 `b_canuse`）自动读写，面板无需再传字段名；`emitUpdate` 维持现有脏数据/向上通知机制不变。
|
||||
|
||||
### 3. 清理死代码
|
||||
|
||||
文件：`fms-vue/src/components/fms-table/utils/createCellRenderers.js`
|
||||
|
||||
- 删除 `createCheckboxCell`（重构后无引用）。
|
||||
- 删除 `createSelectCell`（已无人引用，表格内置 `editor.type==="select"` 已取代）。
|
||||
- 保留 `createCellRenderer` 基础工厂、`createButtonCell`、`createDeleteCell`、`selectValue`（如有引用）。
|
||||
|
||||
## 设计要点 / 性能
|
||||
|
||||
- checkbox 复用 `EditableCell` 单实例渲染函数，每次渲染仅 `h(Checkbox, ...)` 纯函数调用，无额外组件层级，无 row 引用常驻。
|
||||
- 不引入新列属性，沿用 `editor.type` 枚举，与 `select`/`number` 一致，架构可扩展（后续按钮类可类似声明式接入）。
|
||||
- 不修改 `FmsTable.vue` 的包裹与 `update:columns` 往返逻辑，避免回归。
|
||||
|
||||
## 验证
|
||||
|
||||
- `read_lints` 检查上述文件 0 报错（除既有未使用变量提示外）。
|
||||
- 全局搜索 `createCheckboxCell`、`createSelectCell` 引用应仅剩定义处（随后被删除），无面板残留 import。
|
||||
- 功能：模块管理下"字段定义/列表配置/编辑配置/查询配置/权限配置"面板中布尔列显示并可点击切换，切换后脏标记与保存行为不变；非编辑态下 checkbox 仍可直接点击。
|
||||
@@ -0,0 +1,177 @@
|
||||
---
|
||||
name: i18n-type-management
|
||||
overview: 新增「多语言类型」功能：在系统管理下增加一个管理页面，维护系统支持的语言清单（简称/编码、名称、是否默认、是否启用、排序），默认中文(zh-CN)不可删除。包含数据库新表、迁移脚本、前端路由/菜单/管理页面，全部复用现有通用接口。
|
||||
design:
|
||||
architecture:
|
||||
framework: vue
|
||||
styleKeywords:
|
||||
- 企业后台
|
||||
- 简洁清爽
|
||||
- 卡片化表格
|
||||
- 浅色主题
|
||||
- 蓝主色
|
||||
fontSystem:
|
||||
fontFamily: PingFang SC
|
||||
heading:
|
||||
size: 20px
|
||||
weight: 600
|
||||
subheading:
|
||||
size: 14px
|
||||
weight: 500
|
||||
body:
|
||||
size: 13px
|
||||
weight: 400
|
||||
colorSystem:
|
||||
primary:
|
||||
- "#1677ff"
|
||||
- "#4096ff"
|
||||
background:
|
||||
- "#f5f7fa"
|
||||
- "#ffffff"
|
||||
text:
|
||||
- "#1f2329"
|
||||
- "#646a73"
|
||||
functional:
|
||||
- "#52c41a"
|
||||
- "#ff4d4f"
|
||||
- "#faad14"
|
||||
todos:
|
||||
- id: add-i18n-type-migration
|
||||
content: 新建 001_add_i18n_type.sql：建表并播种模块与权限
|
||||
status: completed
|
||||
- id: register-route-menu
|
||||
content: 在 routes.js 与 AppSidebar.vue 注册路由与系统菜单项
|
||||
status: completed
|
||||
- id: build-i18n-type-page
|
||||
content: 使用 [skill:antdv-next] 实现多语言类型管理页面（列表/新增/编辑/删除/启用开关/默认保护）
|
||||
status: completed
|
||||
dependencies:
|
||||
- register-route-menu
|
||||
---
|
||||
|
||||
## 用户需求
|
||||
|
||||
在「系统管理」下新增「多语言类型」管理功能，用于维护系统中支持的语言清单。
|
||||
|
||||
## 产品概述
|
||||
|
||||
新增一张数据库表 `dbo.b_i18n_type` 记录系统支持的语言（简称、名称、是否默认、是否启用、排序），并提供对应的前端管理页面。默认中文（zh-CN）为内置默认语言，不可删除、其编码与默认标记不可修改。页面挂在「系统管理」菜单下，与「模块管理」并列。
|
||||
|
||||
## 核心功能
|
||||
|
||||
- 语言列表展示：简称(b_code)、名称(b_name)、是否默认、是否启用、排序
|
||||
- 新增语言：弹窗表单填写编码/名称/是否启用/是否默认/排序
|
||||
- 编辑语言：弹窗预填，默认语言锁定编码与默认标记
|
||||
- 删除语言：二次确认；默认语言（中文）禁用删除
|
||||
- 是否启用开关：行内 `a-switch` 即时保存
|
||||
- 全部数据读写复用现有通用接口，不新增后端接口
|
||||
|
||||
## 技术栈
|
||||
|
||||
- 后端：Spring Boot（不直接改代码），复用通用接口 `/data/loaddata`、`/data/saveobjt`、`/data/nextid`
|
||||
- 前端：Vue 3 + Vite + antdv-next + FmsTable 封装组件 + Pinia + 路由
|
||||
- 数据库：SQL Server（机构库），新增表迁移脚本
|
||||
|
||||
## 实现方案
|
||||
|
||||
整体采用与「模块管理」一致的模式：新增一张业务表 + 一个迁移脚本（建表并播种模块/权限），前端新增一个独立路由页面，页面用 `FmsTable` 展示，通过 `loadDataApi / nextIdApi / saveObjectApi` 完成增改删，沿用 `b_` 命名、`bigint` 雪花主键、`int` 布尔、`b_xh` 排序等规范（见 `新数据库结构.md`）。
|
||||
|
||||
关键决策：
|
||||
|
||||
1. **新建独立模块 `m_i18n_type`** 而非复用 `m_metadata`：保持权限语义独立，与 `000_reset_metadata.sql` 末尾的模块/权限播种方式一致，在迁移中插入 `b_module`(parent=`m_system`, type=`page`, route=`/system/i18n-type`)、`b_module_power`(create/update/delete)、管理员 `b_user_module`/`b_user_power`。前端 `AppSidebar` 与路由守卫按 `moduleCode:"m_i18n_type"` 自动做权限过滤。
|
||||
2. **不新增 services 文件、不新增后端接口**：页面直接调用 `src/services/api.js` 已有函数，符合开发规范第三条。
|
||||
3. **启用开关即存即改**：`a-switch` 变更仅 `updates:[{b_id, b_canuse}]`，单字段保存，避免整行回写。
|
||||
4. **默认语言保护**：渲染时对 `b_default=1` 的行禁用删除按钮；编辑弹窗中 `b_code` 与「是否默认」禁用，仅允许改名称/启用/排序。
|
||||
|
||||
性能与可靠性：该表为系统级小表，使用 `loadDataApi` 全量加载并按 `b_xh, b_id` 排序即可，无需分页；保存走 `saveObjectApi` 单事务批量 upsert/delete，失败整体回滚。无 N+1、无重复渲染风险。
|
||||
|
||||
## 实现注意事项
|
||||
|
||||
- 迁移脚本命名 `001_add_i18n_type.sql`，沿用 `000_reset_metadata.sql` 的建表风格（命名约束、CHECK 约束、bigint 主键、`int` 布尔默认 1）。
|
||||
- `b_code` 唯一且非空；播种至少 `(zh-CN, 简体中文, b_default=1, b_canuse=1, b_xh=0)`。
|
||||
- 前端组件 `<style scoped lang="scss">`，少量 CSS，复用 antdv-next 能力与现有桌面端布局，不写移动端媒体查询。
|
||||
- 保留用户尚未提交的模块管理改动，本任务不触碰 `module-management` 相关文件。
|
||||
- 按规范交付时不主动执行构建/测试。
|
||||
|
||||
## 架构设计
|
||||
|
||||
```mermaid
|
||||
flowchart LR
|
||||
A[多语言类型页面 index.vue] --> B[services/api.js]
|
||||
B --> C[/data/loaddata]
|
||||
B --> D[/data/saveobjt]
|
||||
B --> E[/data/nextid]
|
||||
C & D & E --> F[(机构库 dbo.b_i18n_type)]
|
||||
A --> G[AppSidebar 菜单 + 路由守卫 canModule]
|
||||
G --> H[(b_user_module / b_module m_i18n_type)]
|
||||
```
|
||||
|
||||
## 目录结构与文件
|
||||
|
||||
```
|
||||
fms-api/config/migrations/
|
||||
└── 001_add_i18n_type.sql # [NEW] 建表 dbo.b_i18n_type（b_id/b_code/b_name/b_i18n/b_canuse/b_default/b_xh + 约束/索引），并播种模块 m_i18n_type、操作权限、管理员授权，使页面默认可见可用。
|
||||
|
||||
fms-vue/src/router/
|
||||
└── routes.js # [MODIFY] 在 children 中新增 /system/i18n-type 路由，meta 含 title/section/menuKey/moduleCode:"m_i18n_type"，组件 import 到 views/system/i18n-type/index.vue。
|
||||
|
||||
fms-vue/src/layouts/components/
|
||||
└── AppSidebar.vue # [MODIFY] 在 systemPages 数组新增 { key:"/system/i18n-type", label:"多语言类型", moduleCode:"m_i18n_type" }，沿用 canModule 过滤。
|
||||
|
||||
fms-vue/src/views/system/i18n-type/
|
||||
└── index.vue # [NEW] 多语言类型管理页。FmsTable 列表 + 工具栏「新增」+ 行内「编辑/删除」+ 启用 switch；弹窗表单（antdv-next a-modal/a-form）；默认中文锁定；读写走 loadDataApi/nextIdApi/saveObjectApi。scoped scss。
|
||||
```
|
||||
|
||||
## 关键代码结构
|
||||
|
||||
新建表 DDL（参考现有 b_ 表风格）：
|
||||
|
||||
```sql
|
||||
CREATE TABLE dbo.b_i18n_type (
|
||||
b_id bigint NOT NULL,
|
||||
b_code varchar(20) NOT NULL,
|
||||
b_name nvarchar(100) NOT NULL,
|
||||
b_i18n varchar(150) NULL,
|
||||
b_canuse int NOT NULL CONSTRAINT DF_b_i18n_type_canuse DEFAULT (1),
|
||||
b_default int NOT NULL CONSTRAINT DF_b_i18n_type_default DEFAULT (0),
|
||||
b_xh int NOT NULL CONSTRAINT DF_b_i18n_type_xh DEFAULT (0),
|
||||
CONSTRAINT PK_b_i18n_type PRIMARY KEY (b_id),
|
||||
CONSTRAINT UQ_b_i18n_type_code UNIQUE (b_code),
|
||||
CONSTRAINT CK_b_i18n_type_canuse CHECK (b_canuse IN (0,1)),
|
||||
CONSTRAINT CK_b_i18n_type_default CHECK (b_default IN (0,1))
|
||||
);
|
||||
CREATE INDEX IX_b_i18n_type_xh ON dbo.b_i18n_type (b_xh, b_id);
|
||||
```
|
||||
|
||||
保存请求体（复用 `saveObjectApi`）：
|
||||
|
||||
```ts
|
||||
// { table, key_field, inserts?, updates?, deletes? }[]
|
||||
{
|
||||
table: "b_i18n_type",
|
||||
key_field: "b_id",
|
||||
inserts: [{ b_id, b_code, b_name, b_i18n, b_canuse, b_default, b_xh }],
|
||||
updates: [{ b_id, b_name, b_canuse, b_default, b_xh }],
|
||||
deletes: [{ b_id }]
|
||||
}
|
||||
```
|
||||
|
||||
## 设计风格
|
||||
|
||||
采用与企业后台一致的专业、简洁管理台风格（参考「模块管理」页面），浅色背景、卡片化表格、清晰分区。顶部工具条（新增按钮）+ 下方 FmsTable 列表，行内禁用开关与操作按钮。整体克制、信息密度适中，蓝(#1677ff)为主操作色，桌面端实现，无需响应式断点。弹窗表单沿用 antdv-next Modal/Form 规范，交互顺滑。
|
||||
|
||||
## 页面区块（单页）
|
||||
|
||||
- 顶部页头：标题「多语言类型」+ 描述，右对齐「新增」主按钮
|
||||
- 工具条：仅含新增按钮（与模块管理布局一致，间距紧凑）
|
||||
- 列表区：FmsTable 列含 简称、名称、是否默认(标签)、是否启用(a-switch)、排序、操作(编辑/删除)
|
||||
- 新增/编辑弹窗：a-form 表单（编码、名称、是否默认、是否启用、排序），默认语言锁定编码与默认
|
||||
- 删除：a-popconfirm 二次确认；默认行删除按钮禁用
|
||||
|
||||
## Agent Extensions
|
||||
|
||||
### Skill
|
||||
|
||||
- **antdv-next**
|
||||
- 用途：在实现管理页面时查阅 antdv-next 组件（a-modal、a-form、a-switch、a-popconfirm、a-table 相关）的 API、属性与插槽用法，确保用法正确。
|
||||
- 预期结果：页面正确复用 antdv-next 组件，弹窗表单与开关交互符合组件规范，不重复造轮子。
|
||||
Reference in new issue
Block a user