# AI Context — FMS 新系统元数据配置 Demo ## 项目目标 这是一个 **FMS 新系统元数据配置演示**,用 React 实现,用于直观展示如何配置模块体系,对应《FMS新系统核心表结构设计.md》中的 17 张核心表。 命名风格参考旧系统:表名 `s_` 前缀、字段 `b_` 前缀 + 驼峰(如 `b_viewtable`、`b_inputdatetime`)。 ## 技术栈 | 项 | 值 | |---|-----| | 框架 | React 19 + TypeScript 6 | | 构建 | Vite 8 | | 样式 | Tailwind CSS v4 (`@tailwindcss/vite`) | | 包管理 | pnpm | ## 文件结构 ``` src/ ├── types/index.ts # 元数据模型(对应 17 张表)+ 工具函数 ├── data/mock.ts # 演示数据:海运订舱 ocean 模块全链路示例 ├── components/ │ ├── ui.tsx # 共享 UI 小组件(Card/Badge/Field/Input/Toggle/表格) │ ├── ModulePanel.tsx # Tab1 模块:s_module 树 + 基本信息 + s_module_dependency DAG │ ├── EntityPanel.tsx # Tab2 实体与字段:s_entity + s_field_group + s_field 合并单表 │ ├── MenuPanel.tsx # Tab3 菜单页面:s_menu 导航树(挂模块 + 引用实体) │ ├── AutoCodePanel.tsx # Tab4 编码与多语言:s_autocode + s_i18n │ └── PermissionPanel.tsx # Tab5 权限:s_role + s_user_role + s_power + s_role_power ├── App.tsx # 主布局 + Tab + 全局状态 + 统计 ├── main.tsx # 入口 └── index.css # Tailwind 入口 ``` ## 设计理念 1. **四 Tab 对应四组表**:模块(模块+依赖)、实体与字段(实体+分组+字段)、菜单页面、编码与多语言 2. **所有数据为前端内存状态**:`App.tsx` 统一持有 state,面板组件通过 onChange 回调修改,演示"配置后立即生效" 3. **字段配置合并单表**:旧系统 4 张配置表(field/edit/list/query)合并为 `s_field` 单表,行内展开编辑 4. **模块树 vs 菜单树分离**:`s_module.b_parent_id` 只做业务分组,`s_menu.b_parent_id` 才是导航层级 5. **开关直接可拨**:必填/列表显示/可查询/启用等布尔字段用 Toggle 拨动 ## 覆盖的表 | Tab | 表 | | --- | --- | | 模块 | `s_module`、`s_module_dependency` | | 实体与字段 | `s_entity`、`s_field_group`、`s_field` | | 菜单页面 | `s_menu` | | 编码与多语言 | `s_autocode`、`s_i18n` | | 权限 | `s_role`、`s_user_role`、`s_power`、`s_role_power` | ## 启动 ```bash pnpm install # 已安装 pnpm dev # http://localhost:3000 ``` ## 注意事项 - 演示数据在 `src/data/mock.ts`,`resetAll` 会重置所有 state 到初始值 - 菜单 `s_menu` 通过 `b_module_id` 挂模块(组织维度)、`b_entity_id` 引用实体,两者可独立演进 - 权限演示:角色(左)→ 角色-权限授权矩阵(授权/拒绝/未授权三态)→ 角色-用户 → 权限点字典,覆盖 `s_role`/`s_user_role`/`s_power`/`s_role_power` 四表 - 新表结构中的日志表(`s_log_technical`/`s_log_login`/`s_log_audit`/`s_log_audit_field`)未在 Demo 中展示,如需可扩展 Tab