workspace/code/test-demo/AI_CONTEXT.md

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

启动

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