---
name: module-management-full-implementation
overview: 基于新数据库结构.md和开发规范.md完整实现模块管理页面。左侧模块树+右侧7个子Tab，子Tab操作按钮靠左。不创建独立的service文件，数据加载/保存逻辑直接写在index.vue中。
todos:
  - id: create-main-page
    content: 重写 index.vue 主页面：左侧 a-tree 模块树 + 右侧 a-tabs 布局，编写全部数据加载/保存逻辑（loadDataApi、saveObjectApi、diff、typeFromSqlType）
    status: completed
  - id: create-basic-panel
    content: 使用 [skill:antdv-next] 创建 ModuleBasicPanel.vue 基本信息表单，根据模块类型控制字段可见性，支持新增和编辑
    status: completed
    dependencies:
      - create-main-page
  - id: create-fields-panel
    content: 创建 ModuleFieldsPanel.vue 字段定义面板，FmsTable 展示字段列表，实现「同步字段」功能，操作按钮靠左
    status: completed
    dependencies:
      - create-main-page
  - id: create-list-edit-query-panels
    content: 创建 ModuleListConfigPanel.vue、ModuleEditConfigPanel.vue、ModuleQueryConfigPanel.vue 三个配置面板，FmsTable 展示数据，操作按钮靠左
    status: completed
    dependencies:
      - create-main-page
  - id: create-group-manager
    content: 创建 FieldGroupManager.vue 共用分组管理弹窗，a-modal + a-tree 管理分组树增删改
    status: completed
    dependencies:
      - create-list-edit-query-panels
  - id: create-powers-i18n-panels
    content: 创建 ModulePowersPanel.vue 权限配置面板和 ModuleI18nPanel.vue 多语言面板，FmsTable 管理数据，操作按钮靠左
    status: completed
    dependencies:
      - create-main-page
---

## 用户需求

根据新数据库结构.md和开发规范.md，完整实现模块管理页面。当前页面是空占位，需要构建左侧模块树+右侧子Tab布局。

## 核心功能

### 主页面布局

- 左侧：使用 `a-tree` 展示模块树（directory/page/data 三级），选中节点加载详情
- 右侧：使用 `a-tabs` 展示子Tab，根据选中模块的 `b_module_type` 动态显示对应Tab

### 模块类型与Tab对应

| 模块类型 | 可见Tab |
| --- | --- |
| directory | 基本信息、权限配置、多语言 |
| page | 基本信息、权限配置、多语言 |
| data | 基本信息、字段定义、列表配置、编辑配置、查询配置、权限配置、多语言 |


### 各子Tab功能

1. **基本信息**：`a-form` 编辑 `b_module` 核心字段（b_code、b_name、b_module_type、b_parent_id、b_route、b_viewtable、b_savetable、b_keyfield、b_orderfield、b_canmenu、b_canuse、b_xh），根据模块类型控制字段可见性。新增模块先调 `nextIdApi`
2. **字段定义**：`FmsTable` 展示 `b_module_field`，不可手工增删行。提供「同步字段」按钮调用 `describeApi` 获取 `b_viewtable` 列结构并与已有字段合并（保留已有配置、追加新列、标记已删列为不可用）。可编辑 `b_name`、`b_type`、`b_default_value`、`b_options`、`b_canuse`
3. **列表配置**：`FmsTable` 展示 `b_module_field_list`，支持新增/删除行。可选字段来自 `b_module_field`（b_canuse=1）。`FieldGroupManager` 弹窗管理 `b_module_field_group` 分组树
4. **编辑配置**：`FmsTable` 展示 `b_module_field_edit`，支持新增/删除行。同样通过 `FieldGroupManager` 管理分组
5. **查询配置**：`FmsTable` 展示 `b_module_field_query`（b_component、b_operator 下拉选择），支持新增/删除行
6. **权限配置**：`FmsTable` 展示 `b_module_power`（b_code、b_name），支持新增/删除行
7. **多语言**：`FmsTable` 展示 `b_i18n`（b_key、b_locale、b_value），支持新增/删除行

### 操作按钮排列

所有子Tab面板内，新增、删除、保存等操作按钮**靠左对齐**（`justify-content: flex-start`）

### 数据架构（不创建独立 service 文件）

- `index.vue` 承担全部数据职责：加载模块树、加载完整配置、维护草稿、对比diff、调用 `saveObjectApi`
- 子组件只通过 `props` 接收数据，通过 `emit('update', newRows)` 上报变更
- `index.vue` 保存流程：`diffRows(draft, original)` → `allocateTemporaryIds` → `saveObjectApi`

## 技术方案

### 实现策略

**数据流集中管理**：`index.vue` 作为数据中枢，直接调用 `loadDataApi`、`saveObjectApi`、`nextIdApi`、`describeApi` 等通用接口。所有子组件是无状态的展示/编辑组件，仅通过 props/emit 与父组件通信。

### 数据流

```
index.vue 选中模块
  → loadDataApi 加载 b_module + 各子表（Promise.all）
  → cloneData 生成 originals（原始快照）和 drafts（编辑草稿）
  → 各子组件接收 drafts 对应部分，用户编辑后 emit('update', newRows)
  → index.vue 更新对应 draft
  → 用户点击「保存」
  → 遍历各子表 diffRows(draft, original)
  → allocateTemporaryIds 分配临时ID
  → 构建 saveObjectApi 请求数组
  → 提交保存 → 重新加载刷新 originals
```

### 关键设计决策

1. **无独立 service 文件**：所有 `loadDataApi`/`saveObjectApi` 调用直接写在 `index.vue` 的 `<script setup>` 中
2. **组件纯展示**：所有子组件只负责展示和编辑，不调用 API
3. **SQL 类型映射**（字段同步用）：`typeFromSqlType()` 作为 `index.vue` 内的普通函数
4. **分组管理复用**：`FieldGroupManager.vue` 接收 groups 数组并通过 emit 返回变更，不直接操作 API
5. **b_module_field 不手工增删**：同步通过 `describeApi`，字段定义面板中只有编辑功能无新增/删除按钮

### 实现要点

- b_id 全部使用 `String()` 包裹进行比对
- 布尔字段为 int 0/1（b_canuse、b_visible、b_sortable、b_required、b_readonly、b_disabled、b_canmenu）
- 子表新增行用 `createTempId()`，保存前 `allocateTemporaryIds()` 换真实ID
- 主表新增模块用 `nextIdApi`
- 操作按钮在子Tab面板内靠左（`a-space` 或 flex 布局 `justify-content: flex-start`）
- 样式使用 SCSS scoped，遵循 `--fms-*` CSS 变量主题

## 目录结构

```
fms-vue/src/views/module-management/
├── index.vue                              # [MODIFY] 主页面
│   - 左侧 a-tree 模块树，右侧 a-tabs
│   - 全部数据加载/保存逻辑（loadDataApi、saveObjectApi、nextIdApi、describeApi）
│   - 维护 drafts 和 originals，构建 diff 和 saveObjectApi 请求
│   - typeFromSqlType() 字段类型映射函数
│   - 选中节点变更、Tab切换、保存按钮事件处理
└── components/
    ├── ModuleBasicPanel.vue               # [NEW] 基本信息表单
    │   - a-form 编辑 b_module 字段
    │   - props: moduleId, data(object), loading
    │   - emit: update(modifiedData)
    │   - 根据 b_module_type 控制字段可见性
    ├── ModuleFieldsPanel.vue              # [NEW] 字段定义表格
    │   - FmsTable 展示 b_module_field 列表
    │   - 工具栏「同步字段」+「保存」按钮靠左
    │   - props: moduleId, fields(array), viewTable, loading
    │   - emit: update(newFields), sync(viewTable)
    │   - 不可新增/删除行，可编辑 b_name/b_type/b_default_value/b_options/b_canuse
    ├── ModuleListConfigPanel.vue          # [NEW] 列表配置表格
    │   - FmsTable 展示 b_module_field_list
    │   - 工具栏新增/删除/保存按钮靠左
    │   - props: moduleId, listConfig(array), fields(array), groups(array), loading
    │   - emit: update(newListConfig), openGroupManager
    │   - 字段选择器展示可用字段，分组列可点击打开分组管理
    ├── ModuleEditConfigPanel.vue          # [NEW] 编辑配置表格
    │   - FmsTable 展示 b_module_field_edit
    │   - 工具栏新增/删除/保存按钮靠左
    │   - props: moduleId, editConfig(array), fields(array), groups(array), loading
    │   - emit: update(newEditConfig), openGroupManager
    ├── ModuleQueryConfigPanel.vue         # [NEW] 查询配置表格
    │   - FmsTable 展示 b_module_field_query
    │   - 工具栏新增/删除/保存按钮靠左
    │   - props: moduleId, queryConfig(array), fields(array), loading
    │   - emit: update(newQueryConfig)
    │   - b_component、b_operator 使用下拉选择
    ├── ModulePowersPanel.vue              # [NEW] 权限配置表格
    │   - FmsTable 展示 b_module_power
    │   - 工具栏新增/删除/保存按钮靠左
    │   - props: moduleId, powers(array), loading
    │   - emit: update(newPowers)
    ├── ModuleI18nPanel.vue                # [NEW] 多语言表格
    │   - FmsTable 展示 b_i18n
    │   - 工具栏新增/删除/保存按钮靠左
    │   - props: moduleId, i18n(array), loading
    │   - emit: update(newI18n)
    │   - 支持按 b_locale 筛选
    └── FieldGroupManager.vue              # [NEW] 共用分组管理弹窗
        - a-modal 内含 a-tree 展示分组树
        - 支持新增/编辑/删除分组节点
        - props: visible, groups(array), moduleId
        - emit: update:visible, update(newGroups)
        - 被 ModuleListConfigPanel 和 ModuleEditConfigPanel 引用
```

## 使用的扩展

### Skill

- **antdv-next**
- 目的：查询 a-tree、a-tabs、a-form、a-form-item、a-modal、a-select、a-input、a-input-number、a-switch、a-button、a-space、a-empty 等组件的 API 文档
- 预期结果：获取准确的 props/events/slots 用法，确保模板中 API 使用正确

### SubAgent

- **code-explorer**
- 目的：在实现过程中快速查找项目中 FmsTable 的 columns 配置模式、dataChanges.js 的 diffRows 调用方式、现有表单校验示例等
- 预期结果：获得准确的现有代码引用，确保新代码风格与项目一致