Commit 014ee34f authored by David Yang's avatar David Yang

docs: standardize UI stack on HeroUI

parent f1f68f53
...@@ -19,15 +19,15 @@ ...@@ -19,15 +19,15 @@
- **组件函数**:必须使用大驼峰形式,例如 `const UserHeader = () => { ... }`。 - **组件函数**:必须使用大驼峰形式,例如 `const UserHeader = () => { ... }`。
- **变量与普通函数**:使用小驼峰 (camelCase)。 - **变量与普通函数**:使用小驼峰 (camelCase)。
- **常量**:使用全大写下划线 (SNAKE_CASE)。 - **常量**:使用全大写下划线 (SNAKE_CASE)。
- **技术栈偏好**: - **技术栈要求**:
- 优先使用 React Hooks 和函数组件。 - 优先使用 React Hooks 和函数组件。
- 样式处理:**统一使用 Hero UI / Hero UI Pro + Tailwind CSS**。 - UI 与样式处理:**全项目统一且仅使用 Hero UI / Hero UI Pro + Tailwind CSS**。
- 交互组件:**优先使用 Hero UI 内置交互组件**,不得新增旧组件库或 `@headlessui/react` 实现。 - 交互组件:**必须使用 Hero UI / Hero UI Pro 提供的组件**;禁止继续使用、扩展或新增 `src/catalyst-ui-kit`、`@headlessui/react` 及其它 UI 组件库实现。
- 组件选择优先级(从高到低): - 组件选择优先级(从高到低):
1. `@heroui/react`(Button/Input/Textarea/Checkbox/Select/ListBox/Popover/Modal/Table/Dropdown/Tabs/Tooltip/...) 1. `@heroui/react`(Button/Input/Textarea/Checkbox/Select/ListBox/Popover/Modal/Table/Dropdown/Tabs/Tooltip/...)
2. `@heroui-pro/react`(Navbar/Sidebar/DataGrid/ActionBar/EmptyState/DropZone/...) 2. `@heroui-pro/react`(Navbar/Sidebar/DataGrid/ActionBar/EmptyState/DropZone/...)
3. 基于 Hero UI 设计体系的自定义组件(仅在 Hero UI / Hero UI Pro 无现成组件时) 3. 基于 Hero UI 设计体系的自定义组件(仅在 Hero UI / Hero UI Pro 无现成组件时)
4. 原生 HTML + 自写样式(尽量避免) 4. 原生 HTML 仅用于无对应组件的语义结构;不得用原生控件和自写样式替代 Hero UI / Hero UI Pro 已提供的组件
## 4. 接口请求规范 ## 4. 接口请求规范
...@@ -42,10 +42,12 @@ ...@@ -42,10 +42,12 @@
## 6. UI 规范(Hero UI 强制约束) ## 6. UI 规范(Hero UI 强制约束)
- **全项目 UI 统一**:默认使用 Hero UI / Hero UI Pro 的组件与样式体系,避免引入其它 UI 框架。 - **唯一 UI 技术栈**:全项目必须使用 Hero UI / Hero UI Pro 的组件与设计体系,不得引入或混用其它 UI 框架。
- **禁止新增旧组件库依赖**:新增或重构代码不得从 `src/catalyst-ui-kit` 或 `@headlessui/react` 引入组件;旧代码迁移时应替换为 Hero UI 对应组件。 - **彻底停用 Catalyst**:禁止从 `src/catalyst-ui-kit`、`@headlessui/react` 或其兼容层导入组件;禁止新增相关依赖、包装组件、适配层或仿制实现。修改仍使用旧组件的页面时,必须将本次改动范围内涉及的旧组件同步迁移为 Hero UI / Hero UI Pro。
- **一致性**:表单控件优先用 Hero UI 的 `Input/Select/Checkbox/Textarea/DatePicker/Fieldset`,表格优先用 `Table` 或 Hero UI Pro `DataGrid`,对话框用 `Modal`,菜单/浮层用 `Dropdown`、`Popover`。 - **组件选择**:表单控件必须使用 Hero UI 的 `Input/Select/Checkbox/Textarea/DatePicker/Fieldset`,表格使用 Hero UI `Table` 或 Hero UI Pro `DataGrid`,对话框使用 `Modal`,菜单与浮层使用 `Dropdown`、`Popover`。
- **可访问性**:移动端侧栏/弹层/下拉等交互必须优先使用 Hero UI / Hero UI Pro 的可访问性组件能力(focus trap / esc 关闭 / aria 属性等)。 - **Hero UI Pro 场景**:Navbar、Sidebar、DataGrid、ActionBar、EmptyState、DropZone 等高级场景优先使用 `@heroui-pro/react` 的现成组件,不得重复造轮子。
- **可访问性**:移动端侧栏、弹层、下拉等交互必须使用 Hero UI / Hero UI Pro 提供的 focus trap、Esc 关闭、键盘导航和 aria 能力。
- **迁移验收**:完成 UI 修改后,必须检查本次涉及文件中不存在 `catalyst-ui-kit` 或 `@headlessui/react` 导入,并确认 Loading、Success、Error、Disabled、Focus 等状态符合 Hero UI 交互模型。
# AI 开发执行规范 # AI 开发执行规范
......
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