---
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 调用正确，无类型错误