Commit 41e4f24d authored by drigle's avatar drigle

docs: switch ui guidance to Hero UI

parent 2a9f1577
...@@ -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 / Hero UI Pro + Tailwind CSS**。
- 交互组件:**优先使用 Headless UI**(已在 Catalyst 组件内封装,除非缺组件才直接用 `@headlessui/react`)。 - 交互组件:**优先使用 Hero UI / Hero UI Pro 组件**,不再使用 Catalyst UI Kit 或 Headless UI 作为默认组件来源。
- 组件选择优先级(从高到低): - 组件选择优先级(从高到低):
1. `src/catalyst-ui-kit/javascript/*`(Button/Input/Dialog/Table/Combobox/SidebarLayout/...) 1. Hero UI / Hero UI Pro 官方组件(Button/Input/Modal/Table/Autocomplete/Select/Checkbox/Textarea/...)
2. 基于 Catalyst 样式规范的自定义组件(仅在 Kit 无现成组件时) 2. 基于 Hero UI 设计规范的自定义组件(仅在 Hero UI / Hero UI Pro 无现成组件时)
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 / Hero UI Pro 强制约束)
- **全项目 UI 统一**:默认使用 `src/catalyst-ui-kit` 中的 Catalyst 组件与样式体系,避免引入其它 UI 框架。 - **全项目 UI 统一**:默认使用 Hero UI / Hero UI Pro 组件与样式体系,避免引入其它 UI 框架。
- **Headless UI 优先**:弹窗/下拉/选择器等交互优先用 Headless UI(直接或通过 Catalyst 组件)。 - **Hero UI 优先**:弹窗/下拉/选择器/自动完成等交互优先使用 Hero UI / Hero UI Pro 组件。
- **一致性**:表单控件优先用 Catalyst 的 `Input/Select/Checkbox/Textarea/Fieldset`,表格用 `Table`,对话框用 `Dialog`。 - **一致性**:表单控件优先用 Hero UI 的 `Input/Select/Checkbox/Textarea`,表格用 `Table`,弹层用 `Modal`,复杂选择用 `Autocomplete`。
- **可访问性**:移动端侧栏/弹层必须使用 Headless UI 的 Dialog 等可访问性组件(focus trap / esc 关闭等)。 - **可访问性**:移动端侧栏/弹层必须使用 Hero UI / Hero UI Pro 提供的可访问性交互组件,确保 focus trap / 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)** | Hero UI `Autocomplete` / `Select` 封装的 `ReferenceSearchSelect` | 必须通过 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 `Input`(`type="date"` / `datetime-local`) | 提交时格式化为 `ISO 8601` 字符串 |
| **布尔 (Boolean)** | Catalyst `Checkbox` | 映射为 true/false | | **布尔 (Boolean)** | Hero UI `Checkbox` | 映射为 true/false |
| **JSON** | Catalyst `Textarea` | 需要包含 JSON 校验逻辑 | | **JSON** | Hero UI `Textarea` | 需要包含 JSON 校验逻辑 |
| **子对象 (Subject)** | **动态表单递归** | **核心逻辑:** 必须先调用 `loadSubject(subjectName)` 接口读取该子对象的字段定义,然后递归应用本映射表生成子表单。 | | **子对象 (Subject)** | **动态表单递归** | **核心逻辑:** 必须先调用 `loadSubject(subjectName)` 接口读取该子对象的字段定义,然后递归应用本映射表生成子表单。 |
--- ---
......
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