Commit a5003a81 authored by David Yang's avatar David Yang

docs: update agent UI library guidance

parent 09b23c4e
...@@ -21,11 +21,11 @@ ...@@ -21,11 +21,11 @@
- **常量**:使用全大写下划线 (SNAKE_CASE)。 - **常量**:使用全大写下划线 (SNAKE_CASE)。
- **技术栈偏好**: - **技术栈偏好**:
- 优先使用 React Hooks 和函数组件。 - 优先使用 React Hooks 和函数组件。
- 样式处理:**优先使用 Tailwind Plus / Catalyst UI Kit(见 `src/catalyst-ui-kit`)+ Tailwind CSS**。 - 样式处理:**优先使用 Hero UI / HeroUI Pro(`@heroui/react`、`@heroui-pro/react`)+ Tailwind CSS**。
- 交互组件:**优先使用 Headless UI**(已在 Catalyst 组件内封装,除非缺组件才直接用 `@headlessui/react`)。 - 交互组件:**优先使用 Hero UI 组件**;只有在 Hero UI 缺少对应能力且项目已有封装无法满足时,才考虑直接使用底层无样式交互库或自定义实现。
- 组件选择优先级(从高到低): - 组件选择优先级(从高到低):
1. `src/catalyst-ui-kit/javascript/*`(Button/Input/Dialog/Table/Combobox/SidebarLayout/...) 1. `@heroui/react` / `@heroui-pro/react` 中的组件(Button/Input/Modal/Table/Autocomplete/Select/Checkbox/Textarea/Dropdown/DatePicker/...)
2. 基于 Catalyst 样式规范的自定义组件(仅在 Kit 无现成组件时) 2. 基于 Hero UI 设计规范和项目现有样式变量的自定义组件(仅在 Hero UI 无现成组件时)
3. 原生 HTML + 自写样式(尽量避免) 3. 原生 HTML + 自写样式(尽量避免)
## 4. 接口请求规范 ## 4. 接口请求规范
...@@ -39,12 +39,12 @@ ...@@ -39,12 +39,12 @@
- 如果 `record-api.md` 或 `subjectsDefinition.md` 中的定义不清晰,请务必询问我,不要随意猜测字段名。 - 如果 `record-api.md` 或 `subjectsDefinition.md` 中的定义不清晰,请务必询问我,不要随意猜测字段名。
- 每次生成代码后,简要说明你引用了哪个 API 和哪些数据对象。 - 每次生成代码后,简要说明你引用了哪个 API 和哪些数据对象。
## 6. UI 规范(Tailwind Plus / Headless UI 强制约束) ## 6. UI 规范(Hero UI 强制约束)
- **全项目 UI 统一**:默认使用 `src/catalyst-ui-kit` 中的 Catalyst 组件与样式体系,避免引入其它 UI 框架。 - **全项目 UI 统一**:默认使用 Hero UI / HeroUI Pro 组件与样式体系,避免引入其它 UI 框架或继续新增 Catalyst 组件依赖。
- **Headless UI 优先**:弹窗/下拉/选择器等交互优先用 Headless UI(直接或通过 Catalyst 组件)。 - **Hero UI 优先**:弹窗、下拉、选择器、表格、表单、导航等交互优先使用 `@heroui/react` 或 `@heroui-pro/react`。
- **一致性**:表单控件优先用 Catalyst 的 `Input/Select/Checkbox/Textarea/Fieldset`,表格用 `Table`,对话框用 `Dialog`。 - **一致性**:表单控件优先用 Hero UI 的 `Input`、`Select`、`Checkbox`、`Textarea`、`Autocomplete`、`DatePicker` 等,表格用 `Table`,对话框用 `Modal` / `Drawer`。
- **可访问性**:移动端侧栏/弹层必须使用 Headless UI 的 Dialog 等可访问性组件(focus trap / esc 关闭等)。 - **可访问性**:移动端侧栏、弹层、下拉和选择器必须使用 Hero UI 提供的可访问性能力(focus 管理、esc 关闭、键盘导航等)。
# AI 开发执行规范 # AI 开发执行规范
...@@ -54,12 +54,12 @@ ...@@ -54,12 +54,12 @@
| 字段类型 (Type) | UI 组件 (Component) | 交互逻辑 / 备注 | | 字段类型 (Type) | UI 组件 (Component) | 交互逻辑 / 备注 |
| :-- | :-- | :-- | | :-- | :-- | :-- |
| **文本 (String)** | Catalyst `Input` | 标准文本输入 | | **文本 (String)** | Hero UI `Input` | 标准文本输入 |
| **引用 (Reference)** | `ReferenceSearchSelect`(Headless UI Combobox) | 必须通过 API 获取列表,选中后仅存储 `_id` | | **引用 (Reference)** | `ReferenceSearchSelect`(基于 Hero UI `Autocomplete` / `Select`) | 必须通过 API 获取列表,选中后仅存储 `_id` |
| **数字 (Number)** | Catalyst `Input`(`type="number"`) | 仅允许输入数字 | | **数字 (Number)** | Hero UI `Input`(`type="number"`) | 仅允许输入数字 |
| **日期 (Date)** | Catalyst `Input`(`type="date"` / `datetime-local`) | 提交时格式化为 `ISO 8601` 字符串 | | **日期 (Date)** | Hero UI `DatePicker` / `Input`(`type="date"` / `datetime-local`) | 提交时格式化为 `ISO 8601` 字符串 |
| **布尔 (Boolean)** | Catalyst `Checkbox` | 映射为 true/false | | **布尔 (Boolean)** | Hero UI `Checkbox` / `Switch` | 映射为 true/false |
| **JSON** | Catalyst `Textarea` | 需要包含 JSON 校验逻辑 | | **JSON** | Hero UI `Textarea` | 需要包含 JSON 校验逻辑 |
| **子对象 (Subject)** | **动态表单递归** | **核心逻辑:** 必须先调用 `loadSubject(subjectName)` 接口读取该子对象的字段定义,然后递归应用本映射表生成子表单。 | | **子对象 (Subject)** | **动态表单递归** | **核心逻辑:** 必须先调用 `loadSubject(subjectName)` 接口读取该子对象的字段定义,然后递归应用本映射表生成子表单。 |
--- ---
...@@ -81,7 +81,7 @@ AI 在编写 API 调用或数据转换逻辑时,必须遵守: ...@@ -81,7 +81,7 @@ AI 在编写 API 调用或数据转换逻辑时,必须遵守:
1. **Step 1**: 查找 `subjectsDefinition.md` 获取该 Subject 的基础字段。 1. **Step 1**: 查找 `subjectsDefinition.md` 获取该 Subject 的基础字段。
2. **Step 2**: 检查字段类型。如果遇到 `Subject` 类型,**自动生成**一段调用 `loadSubject` 的代码以获取深层结构。 2. **Step 2**: 检查字段类型。如果遇到 `Subject` 类型,**自动生成**一段调用 `loadSubject` 的代码以获取深层结构。
3. **Step 3**: 参照上表(第 1 节)选择 tailwind (或你指定的 UI 库) 的组件。 3. **Step 3**: 参照上表(第 1 节)选择 Hero UI 组件。
4. **Step 4**: 自动生成 `onChange` 处理函数,确保数据实时同步到 `metadata` 对象的对应路径下。 4. **Step 4**: 自动生成 `onChange` 处理函数,确保数据实时同步到 `metadata` 对象的对应路径下。
--- ---
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment