workspace/code/test-demo/AI_CONTEXT.md

AI Context — 模块设计器原型

项目目标

这是一个 FMS 模块管理系统的"字段设计器"交互原型，用 React 实现，用于验证设计思路和交互方案。

解决的问题：原有系统将字段的列表、编辑、查询配置分散在 4 个 Tab 中，操作碎片化。目标是把所有配置围绕"字段"聚合，所见即所得。

技术栈

项	值
框架	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 数据 + 工厂函数
├── components/
│   ├── ModuleSettings.tsx   # 顶部模块设置面板（编码/名称/编辑模式等）
│   ├── FormPreview.tsx      # 左侧：表单预览（按分组排列，可拖拽排序）
│   ├── TablePreview.tsx     # 左侧：表格预览（可拖拽列排序 + 列宽调整）
│   ├── FieldConfigList.tsx  # 右侧：字段配置列表（L/E/Q 拨动开关 + 展开快捷编辑）
│   └── DataSourceDrawer.tsx # 下拉数据源配置抽屉（视图/静态选项）
├── App.tsx                  # 主布局 + 全局状态
├── main.tsx                 # 入口
└── index.css                # Tailwind + 自定义 CSS（toggle、drawer 等）

核心设计理念

1. 两栏布局：左侧实时预览（表单/表格切换），右侧字段配置列表
2. 零点击高频操作：列表/编辑/查询开关做成拨动开关（toggle），直接拨不用展开
3. 内联快捷编辑：点击字段行 → 下方展开标签/编码/类型/分组/列宽等基础配置
4. 拖拽排序：表单模式和表格模式都支持拖拽调整字段顺序
5. 表格列宽调整：表格预览下拖拽列头右边缘可调整列宽
6. 数据源配置：下拉字段才有的复杂配置，用右侧抽屉单独处理

数据结构

ModuleField（核心）

{
  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
}

FieldGroup

{ id: string, name: string }

当前状态

• 基本功能：模块设置、表单预览、表格预览、字段配置列表、数据源抽屉 均已实现
• 无 lint 错误
• 表单预览可拖拽排序
• 表格预览可拖拽列排序 + 列宽调整
• 右侧 L/E/Q 拨动开关正常
• 安装依赖 pnpm install
• 启动 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() 工厂函数