20260811165111

2026-08-11 16:51:11 +08:00
1 parent 5adbf59425
commit ce78653207
@@ -0,0 +1,253 @@
+---
+name: module-management-refactor
+overview: 参考旧系统(fms-vue2)的 module-management 完整实现，使用 shadcn-vue + Tailwind CSS 重写新系统(fms-vue)的 module-management，补齐缺失的列表配置、编辑配置、查询配置、自动编码、分组管理等面板功能，修复现有样式和交互问题。
+design:
+  architecture:
+    framework: vue
+  styleKeywords:
+    - 毛玻璃
+    - 垂直导航
+    - 可拖拽面板
+    - 卡片布局
+    - 简洁专业
+  fontSystem:
+    fontFamily: Inter
+    heading:
+      size: 14px
+      weight: 600
+    subheading:
+      size: 13px
+      weight: 500
+    body:
+      size: 13px
+      weight: 400
+  colorSystem:
+    primary:
+      - "#0D0D0D"
+      - "#1A1A1A"
+    background:
+      - "#FFFFFF"
+      - "#F5F5F5"
+      - "#FAFAFA"
+    text:
+      - "#0D0D0D"
+      - "#71717A"
+      - "#A1A1AA"
+    functional:
+      - "#DC2626"
+      - "#16A34A"
+      - "#2563EB"
+todos:
+  - id: rewrite-index
+    content: 重写主页面 index.vue：实现左侧可拖拽宽度模块树 + 右侧 sticky header + 垂直导航 + 内容区布局，完整的 originals/drafts 数据流，所有面板加载/保存/删除/同步逻辑，以及 diffRows+tableChange+allocateTemporaryIds 保存流程
+    status: completed
+  - id: rewrite-basic-panel
+    content: 重写 ModuleBasicPanel.vue：补全图标选择器（Popover 虚拟滚动）、上级模块名显示、多语言键快速设置按钮、默认排序字段输入
+    status: completed
+  - id: rewrite-fields-panel
+    content: 重写 ModuleFieldsPanel.vue：保持 FmsTable 可编辑表格，补全字段同步自动生成 list/edit/query 默认配置的逻辑
+    status: completed
+  - id: rewrite-powers-panel
+    content: 重写 ModulePowersPanel.vue：保持 FmsTable 可编辑表格 + 批量删除 + 行内编辑，补全多语言键快速设置
+    status: completed
+  - id: rewrite-i18n-panel
+    content: 重写 ModuleI18nPanel.vue：参考旧系统完整实现，支持受管/非受管键分离、透视表动态语言列、搜索、批量删除、buildSaveRequest/reconcileManagedRows/markSaved/mergeDefaults/removeByManagedIds 暴露方法
+    status: completed
+  - id: create-new-panels
+    content: 新建 ModuleListConfigPanel、ModuleEditConfigPanel、ModuleQueryConfigPanel、ModuleAutoCodePanel、ModuleCard、FieldGroupManager 六个面板组件，完整实现列表/编辑/查询配置的可编辑表格+行拖拽排序、自动编码规则配置、可折叠卡片容器、分组管理弹窗
+    status: completed
+    dependencies:
+      - rewrite-index
+      - rewrite-basic-panel
+  - id: create-common
+    content: 新建 common.ts：createAutoCodeDraft 工厂函数
+    status: completed
+---
+
+## 用户需求
+
+参考旧系统 (fms-vue2) 的 module-management 完整实现，重构新系统 (fms-vue) 的模块管理页面。新系统代码可以全部删除重写，目标是功能齐全、样式正确。新系统技术栈为 shadcn-vue + Tailwind CSS。
+
+## 产品概述
+
+模块管理是 FMS 平台的核心元数据管理页面，用于维护系统内的模块树结构（目录、页面、数据模块）、字段定义、列表/编辑/查询配置、自动编码规则、操作权限和多语言翻译。
+
+## 核心功能
+
+### 布局与交互
+
+- 左侧模块树（支持拖拽调整宽度 210-440px）+ 右侧详情区
+- 右侧详情：sticky header（模块名 + 类型标签 + 启用/显示菜单开关 + 保存按钮）+ 左侧垂直导航 + 右侧内容区
+- 垂直导航根据模块类型动态显示：data 类型显示基本信息、字段定义、列表配置、编辑配置、查询配置、自动编码、多语言；page 类型显示基本信息、权限配置、多语言；directory 类型仅显示基本信息
+- 树节点右键菜单：按节点类型和权限动态生成（添加目录、添加页面、添加数据分类、添加数据、删除）
+
+### 基本信息面板
+
+- 编码（必填，小写字母/数字/下划线校验）、名称（必填）、模块类型下拉、排序号、图标（目录/页面）、路由（页面必填）、查询视图（数据必填）、保存表、主键字段、默认排序字段
+- 上级模块名（只读，从树解析）
+
+### 字段定义面板
+
+- 使用 FmsTable 可编辑表格展示字段列表：字段名（只读）、字段名称、控件类型下拉（input/textarea/number/money/date/datetime/checkbox/select）、默认值、多语言键（带快速设置按钮）、启用
+- 同步字段按钮：从查询视图读取列结构，合并/新增/移除字段，自动生成 list/edit/query 默认配置，同步受管多语言键
+
+### 列表配置面板（新增）
+
+- 使用 FmsTable 可编辑表格 + 行拖拽排序
+- 列：字段选择、列宽、分组、显示、排序号
+- 工具栏：分组管理按钮（打开 FieldGroupManager）、同步到编辑显示、同步到查询配置
+- 分组管理弹窗：左侧分组树 + 右侧编辑分组详情
+
+### 编辑配置面板（新增）
+
+- 使用 FmsTable 可编辑表格 + 行拖拽排序
+- 列：字段选择、显示、必填、只读、禁用、编辑分组、排序号
+- 工具栏：分组管理按钮、同步到列表配置、同步到查询配置
+
+### 查询配置面板（新增）
+
+- 使用 FmsTable 可编辑表格 + 行拖拽排序
+- 列：字段选择、查询组件（input/select/date/number-range/radio-group）、操作符（=/like/between/in）、默认值、启用、排序号
+- 新增查询条件按钮
+
+### 自动编码面板（新增）
+
+- 启用/禁用开关
+- 业务编号字段选择、固定前缀、日期格式下拉（10种格式）、分隔符、流水号位数、起始值、重置周期（none/year/month/day）
+- 实时编号预览
+
+### 权限配置面板
+
+- 使用 FmsTable 可编辑表格：操作编码、操作名称、多语言键（带快速设置）、排序、启用
+- 新增权限、批量删除、行内编辑
+
+### 多语言面板
+
+- 从 b_i18n_type 动态生成语言列
+- 受管行（模块/字段/权限自动生成）只读保护
+- 搜索、新增翻译、批量删除、快速设置弹窗
+
+### 数据流
+
+- originals（服务器快照）+ drafts（编辑副本）+ diff 模式
+- 保存：一次 saveObjectApi 调用保存 s_module、s_module_field、s_module_field_list、s_module_field_edit、s_module_field_query、s_module_auto_code、s_module_power、b_i18n 所有表变更
+- 删除：级联删除 b_user_module、b_user_power、s_module_field_list、s_module_field_edit、s_module_field_query、s_module_auto_code、s_module_power、s_module_field、s_module_field_group、b_i18n、s_module
+- 字段同步：读取视图列结构 → 合并字段 → 自动生成缺失的 list/edit/query 默认配置 → 注入多语言默认值
+
+## 技术栈
+
+- **前端框架**: Vue 3 + TypeScript + `<script setup>`
+- **UI 组件库**: shadcn-vue（Button、Input、Textarea、Select、Switch、Checkbox、Dialog、Tabs、Table、Card、Collapsible、ScrollArea、DropdownMenu、ContextMenu、Popover、Tooltip、Badge、Separator、Resizable）
+- **CSS 框架**: Tailwind CSS v4（`@import "tailwindcss"`）
+- **图标**: @lucide/vue
+- **状态管理**: Pinia（permissionStore、appStore）
+- **API**: 复用通用端点 loadDataApi、saveObjectApi、nextIdApi、describeApi
+- **表格组件**: FmsTable（可编辑表格、行拖拽排序）
+- **树组件**: FmsTree（带右键菜单支持）
+
+## 实现方案
+
+### 总体策略
+
+直接参考旧系统 (fms-vue2) 的完整实现逻辑，用 shadcn-vue + Tailwind CSS 重新实现所有面板和组件。删除新系统现有的所有 module-management 代码，从零重写。
+
+### 关键设计决策
+
+1. **布局**: 恢复旧系统的左侧垂直导航 + 右侧内容区布局，使用 `Resizable` 或手动实现左侧拖拽调整宽度
+2. **面板架构**: 每个面板通过 v-model 直接写入 drafts 对象，由主页面统一 diff + save
+3. **保存模式**: 参考旧系统的 diffRows + tableChange + allocateTemporaryIds 流程
+4. **字段同步**: 参考旧系统的 syncFields 逻辑，同步后自动生成 list/edit/query 默认配置
+5. **I18n 面板**: 参考旧系统的完整实现（受管/非受管键分离、透视表、buildSaveRequest/reconcileManagedRows/markSaved/mergeDefaults/removeByManagedIds 等暴露方法）
+
+### 文件规划
+
+```
+fms-vue/src/views/system/module-management/
+├── index.vue                              # [重写] 主页面
+├── common.ts                              # [新建] createAutoCodeDraft 等工具函数
+└── components/
+    ├── ModuleBasicPanel.vue               # [重写] 基本信息面板
+    ├── ModuleFieldsPanel.vue              # [重写] 字段定义面板
+    ├── ModuleListConfigPanel.vue          # [新建] 列表配置面板
+    ├── ModuleEditConfigPanel.vue          # [新建] 编辑配置面板
+    ├── ModuleQueryConfigPanel.vue         # [新建] 查询配置面板
+    ├── ModuleAutoCodePanel.vue            # [新建] 自动编码面板
+    ├── ModulePowersPanel.vue              # [重写] 权限配置面板
+    ├── ModuleI18nPanel.vue                # [重写] 多语言面板（完整版）
+    ├── ModuleCard.vue                     # [新建] 可折叠卡片容器
+    ├── FieldGroupManager.vue              # [新建] 分组管理弹窗
+    └── I18nQuickSetModal.vue              # [保留优化] 多语言快速设置弹窗
+```
+
+### 数据流
+
+```mermaid
+flowchart TD
+    A[选择树节点] --> B[loadModuleConfig]
+    B --> C{模块类型}
+    C -->|data| D[加载 s_module + fields + groups + list + edit + query + autoCode]
+    C -->|page| E[加载 s_module + powers]
+    C -->|directory| F[加载 s_module]
+    D --> G[存入 originals + drafts]
+    E --> G
+    F --> G
+    G --> H[用户在各面板编辑]
+    H --> I[saveAll 统一保存]
+    I --> J[diffRows 各子表]
+    J --> K[tableChange + allocateTemporaryIds]
+    K --> L[saveObjectApi 一次性提交]
+    L --> M[更新 originals + 刷新树 + 刷新权限]
+```
+
+### 性能考虑
+
+- 模块树数据量小（通常 < 100 节点），一次 loadDataApi 全量加载，前端 buildTree
+- 配置数据按模块按需加载，切换节点时加载对应模块配置
+- 字段同步时 describeApi 读视图列结构，请求量小
+- 保存时所有表变更打包一次 saveObjectApi 调用，减少网络往返
+
+## 设计风格
+
+采用旧系统的布局结构，用 shadcn-vue + Tailwind CSS 实现现代化视觉效果。
+
+### 整体布局
+
+- 左侧模块树（可拖拽宽度 260px 默认，范围 210-440px）+ 拖拽手柄（4px 宽，hover 变色）+ 右侧详情区
+- 右侧详情：sticky header（毛玻璃效果 backdrop-blur）+ 左侧垂直导航（148px 宽）+ 右侧内容区（独立滚动）
+
+### Header 设计
+
+- 毛玻璃背景（bg-background/85 backdrop-blur-md），底部边框
+- 左侧：模块名称（14px 粗体）+ 类型标签（小号大写字母，rounded badge）
+- 右侧：启用/显示菜单 Switch 开关 + 保存按钮（primary 变体）
+
+### 垂直导航设计
+
+- 148px 宽，左侧竖排按钮组
+- 每项：Lucide 图标（16px）+ 文字标签
+- 未激活：灰色文字，hover 时浅色背景
+- 激活：加粗文字 + 浅色背景高亮
+- 根据模块类型动态显示/隐藏项
+
+### 内容区设计
+
+- flex-1，独立 overflow-y-auto 滚动
+- padding: 16px 20px 24px
+- 各面板内部使用 ModuleCard 可折叠卡片组织内容
+- FmsTable 表格：边框圆角、斑马纹、hover 高亮行
+
+### 交互反馈
+
+- 所有可点击元素带 cursor-pointer 和 hover 效果
+- Switch 开关带过渡动画
+- 按钮 hover 时 shadow 提升 + scale 微动
+- 树节点拖拽手柄 hover 时变色
+- 加载状态用 FmsLoadingOverlay（pointer-events-none）
+
+## Agent Extensions
+
+### Skill
+
+- **shadcn-vue**
+- 用途：确认 shadcn-vue 各组件的 API、props、slots、事件，确保 Dialog、Tabs、Select、Switch、Table、Resizable 等组件正确使用
+- 预期结果：所有使用的 shadcn-vue 组件 API 调用正确，无类型错误
@@ -0,0 +1,264 @@
+---
+name: 模块管理迁移计划
+overview: 将 fms-vue2（antdv）的模块管理页面迁移到 fms-vue（shadcn-vue + reka-ui + tailwindcss），核心面板包括：基本信息、字段定义、权限配置、多语言。沿用 originals+drafts+diff 数据流模式，复用通用数据 API。
+todos:
+  - id: create-tool-functions
+    content: 创建工具函数：dataChanges.ts（diffRows/tableChange/allocateTemporaryIds/cloneData/hasChanges）、tempId.ts（createTempId）、i18n.ts（validateModuleCode/buildModuleI18nKey 等），TypeScript 化旧系统代码
+    status: completed
+  - id: create-types-and-service
+    content: 创建类型定义 types/module.ts 和 API 服务 services/moduleManagement.ts（封装 loadTree/loadModuleConfig/saveModule/deleteModule/syncFields）
+    status: completed
+  - id: create-loading-overlay
+    content: 创建 FmsLoadingOverlay.vue 加载遮罩组件
+    status: completed
+  - id: rewrite-index-page
+    content: 重写 index.vue 主页面：左侧树（FmsTree + 搜索 + 右键菜单 + 拖拽分隔线）+ 右侧详情（Header + section nav + 面板切换）+ 数据加载/保存/删除/字段同步完整逻辑
+    status: completed
+    dependencies:
+      - create-tool-functions
+      - create-types-and-service
+      - create-loading-overlay
+  - id: create-basic-panel
+    content: 使用 [skill:shadcn-vue] 创建 ModuleBasicPanel.vue：基于 shadcn-vue Form 组件（vee-validate + zod）构建表单，按模块类型动态显示字段，含图标选择器
+    status: completed
+    dependencies:
+      - create-tool-functions
+      - create-types-and-service
+  - id: create-fields-powers-i18n-panels
+    content: 创建 ModuleFieldsPanel.vue（StkTable + 同步字段）、ModulePowersPanel.vue（StkTable + 增删改）、ModuleI18nPanel.vue（StkTable + 受管键 + I18nQuickSetModal），从旧系统迁移完整逻辑
+    status: completed
+    dependencies:
+      - create-tool-functions
+      - create-types-and-service
+---
+
+## 用户需求
+
+将 fms-vue2 旧系统的模块管理页面迁移到 fms-vue 新系统，实现模块元数据的管理功能。
+
+## 核心功能
+
+### 1. 模块树管理
+
+- 左侧树形面板展示所有启用模块（s_module 表），支持虚拟根节点
+- 支持按模块名称/编码搜索过滤
+- 右键菜单：添加目录、添加页面、添加数据分类、添加数据、删除节点
+- 删除节点前校验无子节点，级联删除所有子表数据
+- 左侧面板宽度可拖拽调整（210px ~ 440px）
+- 点击树节点加载右侧配置详情
+
+### 2. 基本信息面板（所有模块类型）
+
+- 表单字段：b_code（编码）、b_name（名称）、b_module_type（类型：目录/页面/数据分类/数据）、b_parent_id（上级模块，只读展示父名称）、b_xh（排序号）
+- 目录/页面可见：b_icon（图标选择）、b_route（路由，页面必填）、b_canmenu（显示菜单开关）
+- 数据可见：b_viewtable（查询视图，必填）、b_savetable（保存表）、b_keyfield（主键字段）
+- 模块类型变更时自动清空不适用的字段
+- Header 区域：模块名称 + 类型标签 + 启用开关 + 显示菜单开关 + 保存按钮
+
+### 3. 字段定义面板（data 类型）
+
+- 表格展示字段列表（b_field 字段名、b_name 显示名、b_type 控件类型、b_canuse 启用）
+- 工具栏：同步字段按钮（调用 describeApi 拉视图列，与现有字段合并）
+- 支持行内编辑、上移/下移、删除行
+- 同步逻辑：视图已有列保留原配置、新增列追加默认行、已删列移除并清理关联配置
+
+### 4. 权限配置面板（page 类型）
+
+- 表格展示操作权限列表（b_code 权限编码、b_name 权限名称、b_canuse 启用）
+- 支持上移/下移、新增行、删除行
+
+### 5. 多语言面板（非 directory 类型）
+
+- 表格展示翻译条目（b_key 多语言键、各语言列的值）
+- 受管键（模块/字段/权限的自动生成键）只读展示
+- 非受管键支持手动编辑
+- 支持快速设置弹窗
+
+### 6. 统一保存
+
+- 点击保存按钮，通过 diffRows 比较 drafts 与 originals 计算增量
+- 子表临时负数 ID 通过 allocateTemporaryIds 批量替换为真实雪花 ID
+- 调用 saveObjectApi 在同一事务中批量提交所有表的变更
+- 保存成功后更新 originals 快照、刷新树节点、刷新权限数据
+
+## 技术栈
+
+- 前端框架：Vue 3 + TypeScript + Vite
+- UI 组件：shadcn-vue（reka-ui）+ Tailwind CSS
+- 表单验证：vee-validate + zod
+- 表格：stk-table-vue（StkTable）
+- 状态管理：Pinia
+- Toast：vue-sonner
+- 图标：lucide-vue
+- API 层：复用现有 api.ts（loadDataApi / saveObjectApi / nextIdApi / describeApi / loadDataBySqlApi）
+
+## 实现方案
+
+### 整体策略
+
+从旧系统完整迁移核心逻辑，适配新系统的 TypeScript + shadcn-vue + tailwindcss 技术栈。复用新系统已有的 FmsTree 树组件和 buildTree/sortTree 工具，新建缺失的工具函数和面板组件。
+
+### 数据流架构
+
+沿用旧系统 originals + drafts + diff 模式：
+
+```mermaid
+flowchart TD
+    A[loadTree: loadDataApi s_module] --> B[buildTree 构建树结构]
+    B --> C[用户点击树节点]
+    C --> D[loadModuleConfig: 按模块类型并行加载子表]
+    D --> E[originals = 加载的快照]
+    E --> F[drafts = cloneData originals]
+    F --> G[子面板编辑 drafts]
+    G --> H[用户点击保存]
+    H --> I[diffRows 比较 drafts vs originals]
+    I --> J[allocateTemporaryIds 替换临时负数ID]
+    J --> K[saveObjectApi 批量提交]
+    K --> L[originals = cloneData drafts]
+    L --> M[刷新树节点 + 权限数据]
+```
+
+### 关键设计决策
+
+1. **TypeScript 化**：所有工具函数和组件使用 TypeScript 编写，类型安全
+2. **表单方案**：使用 shadcn-vue 的 Form 组件（vee-validate + zod），参考 login 页面的使用模式
+3. **表格方案**：使用 stk-table-vue 的 StkTable，保持与新系统一致
+4. **临时 ID**：子表新增行使用前端临时负数 ID，保存时通过 allocateTemporaryIds 批量替换
+5. **模块类型路由**：section nav 根据 b_module_type 动态显示面板入口，使用 v-if 切换而非路由跳转
+6. **权限控制**：通过 permissionStore.canPower('m_metadata', actionCode) 控制按钮可用性
+
+### 文件拆分原则
+
+- index.vue：主协调层（树交互、数据加载/保存、面板切换、权限校验），目标控制在 400 行以内
+- 各面板组件：独立文件，通过 props 接收数据、emit 通知变更
+- 工具函数：按职责拆分到 utils/ 下独立文件
+- 类型定义：统一放在 types/ 目录
+
+## 实现细节
+
+### 性能考量
+
+- 树加载：一次性加载全部 s_module 行（b_canuse = 1），前端 buildTree 构建，无需多次请求
+- 配置加载：按模块类型并行请求（Promise.all），非 data 类型只加载必需表
+- 保存：一次 saveObjectApi 调用包含所有表的变更，事务保证一致性
+- diffRows 比较：使用 Map 按 b_id 索引，O(n) 复杂度
+- 树搜索：前端 filterTree 递归过滤，无需后端请求
+
+### 日志与错误处理
+
+- 加载失败：toast.error 提示用户，不清空已有数据
+- 保存失败：toast.error 提示，drafts 不回退（保留用户编辑）
+- 权限不足：按钮 disabled，不显示 toast
+
+### 兼容性
+
+- b_id 始终序列化为字符串
+- boolean 列使用 int 0/1
+- API 请求格式与后端 DataController 完全一致
+- 不修改任何通用端点
+
+## 目录结构
+
+```
+fms-vue/src/
+├── utils/
+│   ├── dataChanges.ts          # [NEW] 数据变更工具。导出 cloneData、diffRows、allocateTemporaryIds、remapForeignKeys、tableChange、hasChanges 函数。TypeScript 化旧系统 dataChanges.js，适配新系统 API 类型。
+│   ├── tempId.ts               # [NEW] 临时 ID 生成。导出 createTempId 函数，生成会话内唯一的负数字符串 ID（"-1"、"-2"…）。TypeScript 化旧系统 tempId.js。
+│   └── i18n.ts                 # [NEW] 多语言工具。导出 validateModuleCode、buildModuleI18nKey、buildModuleItemI18nKey、syncModuleItemI18nKeys、groupI18nRows、mergeI18nDefaults、consolidatePivotRows 函数。TypeScript 化旧系统 utils/i18n.js。
+├── types/
+│   └── module.ts               # [NEW] 模块管理类型定义。定义 ModuleData、ModuleField、ModulePower、I18nRow 等接口，以及 SectionName、ModuleType 等类型。
+├── services/
+│   └── moduleManagement.ts     # [NEW] 模块管理 API 服务。封装 loadTree、loadModuleConfig、saveModule、deleteModule、syncFields 等业务方法，内部调用 api.ts 通用端点。
+├── views/system/module-management/
+│   ├── index.vue               # [MODIFY] 主页面。完整重写：左侧树 + 可拖拽分隔线 + 右侧 Header + section nav + 面板区。实现树交互、数据加载/保存、面板切换、权限校验。
+│   └── components/
+│       ├── ModuleBasicPanel.vue      # [NEW] 基本信息面板。使用 shadcn-vue Form 组件（vee-validate + zod）构建表单，根据模块类型动态显示/隐藏字段。支持图标选择器（复用项目已有的 lucideIcons 工具）。
+│       ├── ModuleFieldsPanel.vue     # [NEW] 字段定义面板。使用 StkTable 展示字段列表，支持行内编辑、上移/下移、删除。工具栏包含"同步字段"按钮（调用 describeApi）。
+│       ├── ModulePowersPanel.vue     # [NEW] 权限配置面板。使用 StkTable 展示权限列表，支持上移/下移、新增行、删除行。
+│       ├── ModuleI18nPanel.vue       # [NEW] 多语言面板。使用 StkTable 展示翻译条目（b_key + 各语言列），支持受管键只读展示、非受管键行内编辑。包含 I18nQuickSetModal 快速设置弹窗。
+│       ├── I18nQuickSetModal.vue     # [NEW] 多语言快速设置弹窗。使用 Dialog 组件，表单输入各语言翻译值，提交后合并到 i18n 草稿中。
+│       └── FmsLoadingOverlay.vue     # [NEW] Loading 遮罩层组件。使用 shadcn-vue 的 Skeleton 或自定义 spinner，覆盖在内容区域上方显示加载状态。新系统中不存在此组件。
+```
+
+## 关键代码结构
+
+### 类型定义（types/module.ts）
+
+```typescript
+export type ModuleType = 'directory' | 'page' | 'data_category' | 'data';
+
+export interface ModuleData {
+  b_id: string;
+  b_code: string;
+  b_name: string;
+  b_module_type: ModuleType;
+  b_parent_id: string | null;
+  b_i18n: string | null;
+  b_xh: number;
+  b_icon: string | null;
+  b_route: string | null;
+  b_viewtable: string | null;
+  b_savetable: string | null;
+  b_keyfield: string | null;
+  b_canmenu: number;
+  b_canuse: number;
+  [key: string]: unknown;
+}
+
+export interface ModuleField {
+  b_id: string;
+  b_module_id: string;
+  b_field: string;
+  b_name: string;
+  b_i18n: string | null;
+  b_type: string;
+  b_default_value: string | null;
+  b_options: string | null;
+  b_canuse: number;
+  [key: string]: unknown;
+}
+
+export interface ModulePower {
+  b_id: string;
+  b_module_id: string;
+  b_code: string;
+  b_name: string;
+  b_i18n: string | null;
+  b_xh: number;
+  b_canuse: number;
+  [key: string]: unknown;
+}
+
+export interface Originals {
+  module: ModuleData | null;
+  fields: ModuleField[];
+  powers: ModulePower[];
+}
+
+export type SectionName = 'module' | 'fields' | 'powers';
+```
+
+### dataChanges 核心函数签名（utils/dataChanges.ts）
+
+```typescript
+export function cloneData<T>(value: T): T;
+export function diffRows<T extends { b_id: string }>(current: T[], previous: T[]): { inserts: T[]; updates: T[]; deletes: { b_id: string }[] };
+export function tableChange(table: string, changes: { inserts?: unknown[]; updates?: unknown[]; deletes?: unknown[] }): SaveRequest;
+export function hasChanges(request: SaveRequest): boolean;
+export async function allocateTemporaryIds(rowGroups: unknown[][]): Promise<Map<string, string>>;
+export function remapForeignKeys(rows: Record<string, unknown>[], fields: string[], mapping: Map<string, string>): void;
+```
+
+## Agent Extensions
+
+### Skill
+
+- **shadcn-vue**
+- 用途：在构建 Form 表单组件和 Dialog 弹窗时，查询 shadcn-vue 组件的 API 文档、props/slots/events 定义
+- 预期结果：确保 Form、FormField、FormItem、Dialog 等组件的使用方式与 shadcn-vue 官方文档一致
+
+### SubAgent
+
+- **code-explorer**
+- 用途：在实现过程中需要快速定位旧系统面板组件的具体实现细节时，用于搜索和读取旧系统代码
+- 预期结果：获取 ModuleFieldsPanel、ModulePowersPanel、ModuleI18nPanel 的完整实现逻辑作为迁移参考