20260819213933
This commit is contained in:
oneao committed
1 parent
a0a4273f4c
commit
8e75c7989a
27 files changed
+3852
-2434
No files matched your search
@@ -1,10 +1,10 @@
|
||||
# AI Context — 模块设计器原型
|
||||
# AI Context — FMS 新系统元数据配置 Demo
|
||||
|
||||
## 项目目标
|
||||
|
||||
这是一个 **FMS 模块管理系统的"字段设计器"交互原型**，用 React 实现，用于验证设计思路和交互方案。
|
||||
这是一个 **FMS 新系统元数据配置演示**，用 React 实现，用于直观展示如何配置模块体系，对应《FMS新系统核心表结构设计.md》中的 17 张核心表。
|
||||
|
||||
解决的问题：原有系统将字段的列表、编辑、查询配置分散在 4 个 Tab 中，操作碎片化。目标是把所有配置围绕"字段"聚合，所见即所得。
|
||||
命名风格参考旧系统：表名 `s_` 前缀、字段 `b_` 前缀 + 驼峰（如 `b_viewtable`、`b_inputdatetime`）。
|
||||
|
||||
## 技术栈
|
||||
|
||||
@@ -13,70 +13,54 @@
|
||||
| 框架 | React 19 + TypeScript 6 |
|
||||
| 构建 | Vite 8 |
|
||||
| 样式 | Tailwind CSS v4 (`@tailwindcss/vite`) |
|
||||
| 拖拽 | `@dnd-kit/core` + `@dnd-kit/sortable` |
|
||||
| 包管理 | pnpm |
|
||||
|
||||
## 文件结构
|
||||
|
||||
```
|
||||
src/
|
||||
├── types/index.ts # 所有 TS 类型定义 + FieldTypeDef 常量
|
||||
├── data/moduleData.ts # Mock 数据 + 工厂函数
|
||||
├── types/index.ts # 元数据模型（对应 17 张表）+ 工具函数
|
||||
├── data/mock.ts # 演示数据：海运订舱 ocean 模块全链路示例
|
||||
├── components/
|
||||
│ ├── ModuleSettings.tsx # 顶部模块设置面板（编码/名称/编辑模式等）
|
||||
│ ├── FormPreview.tsx # 左侧：表单预览（按分组排列，可拖拽排序）
|
||||
│ ├── TablePreview.tsx # 左侧：表格预览（可拖拽列排序 + 列宽调整）
|
||||
│ ├── FieldConfigList.tsx # 右侧：字段配置列表（L/E/Q 拨动开关 + 展开快捷编辑）
|
||||
│ └── DataSourceDrawer.tsx # 下拉数据源配置抽屉（视图/静态选项）
|
||||
├── App.tsx # 主布局 + 全局状态
|
||||
├── main.tsx # 入口
|
||||
└── index.css # Tailwind + 自定义 CSS（toggle、drawer 等）
|
||||
│ ├── 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. **两栏布局**：左侧实时预览（表单/表格切换），右侧字段配置列表
|
||||
2. **零点击高频操作**：列表/编辑/查询开关做成拨动开关（toggle），直接拨不用展开
|
||||
3. **内联快捷编辑**：点击字段行 → 下方展开标签/编码/类型/分组/列宽等基础配置
|
||||
4. **拖拽排序**：表单模式和表格模式都支持拖拽调整字段顺序
|
||||
5. **表格列宽调整**：表格预览下拖拽列头右边缘可调整列宽
|
||||
6. **数据源配置**：下拉字段才有的复杂配置，用右侧抽屉单独处理
|
||||
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 拨动
|
||||
|
||||
## 数据结构
|
||||
## 覆盖的表
|
||||
|
||||
### ModuleField（核心）
|
||||
```ts
|
||||
{
|
||||
id: number, code: string, label: string, type: string,
|
||||
groupId: string | null, order: number,
|
||||
// 列表
|
||||
listOn: boolean, listW: number, listAlign: "left"|"center"|"right",
|
||||
// 编辑
|
||||
editOn: boolean, editReq: boolean, editRO: boolean,
|
||||
// 查询
|
||||
queryOn: boolean, queryOp: string, queryDef: string,
|
||||
// 数据源（下拉字段专用）
|
||||
ds: { type:"view"|"static", ... } | null
|
||||
}
|
||||
| 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
|
||||
```
|
||||
|
||||
### FieldGroup
|
||||
```ts
|
||||
{ id: string, name: string }
|
||||
```
|
||||
|
||||
## 当前状态
|
||||
|
||||
- [ ] 基本功能：模块设置、表单预览、表格预览、字段配置列表、数据源抽屉 均已实现
|
||||
- [ ] 无 lint 错误
|
||||
- [ ] 表单预览可拖拽排序
|
||||
- [ ] 表格预览可拖拽列排序 + 列宽调整
|
||||
- [ ] 右侧 L/E/Q 拨动开关正常
|
||||
- [x] 安装依赖 `pnpm install`
|
||||
- [x] 启动 `pnpm dev`（端口 3000）
|
||||
|
||||
## 注意事项
|
||||
|
||||
- `@dnd-kit/modifiers` 不可用，用本地 `Modifier` 函数替代了 `restrictToVerticalAxis` / `restrictToHorizontalAxis`
|
||||
- 所有样式在 `src/index.css` 中，使用 class 名而非 Tailwind 原子类的地方（toggle、drawer、field-row 等）是因为这些需要状态驱动的复杂样式
|
||||
- 类型定义在 `src/types/index.ts`，修改字段结构时记得同步更新 `src/data/moduleData.ts` 中的 `makeField()` 工厂函数
|
||||
- 演示数据在 `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
|
||||
Reference in new issue
Block a user