22 KiB
22 KiB
UI组件库
**本文档引用的文件** - [package.json](file://frontend/package.json) - [tailwind.config.ts](file://frontend/tailwind.config.ts) - [lib/utils.ts](file://frontend/lib/utils.ts) - [components/ui/button.tsx](file://frontend/components/ui/button.tsx) - [components/ui/dialog.tsx](file://frontend/components/ui/dialog.tsx) - [components/ui/dropdown-menu.tsx](file://frontend/components/ui/dropdown-menu.tsx) - [components/ui/input.tsx](file://frontend/components/ui/input.tsx) - [components/ui/select.tsx](file://frontend/components/ui/select.tsx) - [components/ui/card.tsx](file://frontend/components/ui/card.tsx) - [components/ui/badge.tsx](file://frontend/components/ui/badge.tsx) - [components/ui/table.tsx](file://frontend/components/ui/table.tsx) - [components/ui/tabs.tsx](file://frontend/components/ui/tabs.tsx) - [components/ui/label.tsx](file://frontend/components/ui/label.tsx) - [components/providers.tsx](file://frontend/components/providers.tsx) - [app/layout.tsx](file://frontend/app/layout.tsx) - [app/(dashboard)/dashboard/page.tsx](file://frontend/app/(dashboard)/dashboard/page.tsx) - [app/(dashboard)/dashboard/citations/page.tsx](file://frontend/app/(dashboard)/dashboard/citations/page.tsx)更新摘要
所做更改
- 新增了仪表板页面中UI组件的实际使用示例分析
- 扩展了按钮、输入框、选择器、对话框、表格等组件的具体应用场景
- 增加了组件在真实业务场景中的组合使用模式
- 完善了组件可访问性与状态管理的最佳实践
目录
简介
本UI组件库以Radix UI为核心，结合Tailwind CSS实现一致、可访问且可定制的基础组件。组件遵循以下设计原则：
- 可访问性优先：基于Radix UI的语义化和键盘交互能力
- 一致性：统一的视觉语言与交互模式
- 可定制性：通过变体系统与CSS变量实现主题与尺寸扩展
- 响应式：在移动端与桌面端保持良好体验
- 组合性：以组合模式构建复杂界面，避免过度封装
项目结构
前端采用Next.js应用结构，UI组件集中于components/ui目录，通过cn工具函数统一类名合并，Tailwind配置提供主题变量与动画插件。
graph TB
subgraph "前端应用"
LAYOUT["app/layout.tsx<br/>根布局与字体"]
PROVIDERS["components/providers.tsx<br/>会话提供者"]
DASHBOARD["app/(dashboard)/dashboard/page.tsx<br/>仪表盘页面"]
CITATIONS["app/(dashboard)/dashboard/citations/page.tsx<br/>引用记录页面"]
end
subgraph "UI组件库"
BUTTON["components/ui/button.tsx"]
INPUT["components/ui/input.tsx"]
SELECT["components/ui/select.tsx"]
DIALOG["components/ui/dialog.tsx"]
DROPDOWN["components/ui/dropdown-menu.tsx"]
CARD["components/ui/card.tsx"]
TABLE["components/ui/table.tsx"]
TABS["components/ui/tabs.tsx"]
LABEL["components/ui/label.tsx"]
BADGE["components/ui/badge.tsx"]
end
UTILS["lib/utils.ts<br/>类名合并工具"]
LAYOUT --> PROVIDERS
LAYOUT --> DASHBOARD
LAYOUT --> CITATIONS
DASHBOARD --> CARD
DASHBOARD --> TABLE
CITATIONS --> INPUT
CITATIONS --> SELECT
CITATIONS --> TABLE
CITATIONS --> BUTTON
CITATIONS --> LABEL
CITATIONS --> BADGE
BUTTON --> UTILS
INPUT --> UTILS
SELECT --> UTILS
DIALOG --> UTILS
DROPDOWN --> UTILS
CARD --> UTILS
TABLE --> UTILS
TABS --> UTILS
LABEL --> UTILS
BADGE --> UTILS
图表来源
- app/layout.tsx:1-37
- components/providers.tsx:1-9
- app/(dashboard)/dashboard/page.tsx
- app/(dashboard)/dashboard/citations/page.tsx
- lib/utils.ts:1-7
章节来源
核心组件
本节概述所有基础UI组件的功能、属性与使用场景，并说明其可访问性与一致性保障。
-
按钮 Button
- 功能：承载点击动作，支持多种外观与尺寸
- 关键属性：variant（外观）、size（尺寸）、asChild（语义化渲染）
- 可访问性：继承原生button语义，支持聚焦与键盘激活
- 使用示例路径：按钮使用示例
-
输入框 Input
- 功能：文本输入，支持禁用与聚焦态样式
- 关键属性：type、className等原生属性透传
- 可访问性：原生语义，配合Label使用提升可访问性
- 使用示例路径：输入框使用示例
-
选择器 Select
- 功能：下拉选择，支持滚动按钮与多级选项
- 关键属性：触发器、内容区、项、分隔符、滚动按钮
- 可访问性：基于Radix UI的键盘导航与焦点管理
- 使用示例路径：选择器使用示例
-
对话框 Dialog
- 功能：模态对话，包含覆盖层、内容区、标题与描述
- 关键属性：Portal、Overlay、Content、Close等
- 可访问性：自动聚焦到内容区，支持Esc关闭
- 使用示例路径：对话框使用示例:1-123
-
下拉菜单 Dropdown Menu
- 功能：上下文菜单，支持子菜单、复选/单选项、快捷键提示
- 关键属性：Root、Trigger、Content、Item、CheckboxItem、RadioItem、Label、Separator、Shortcut等
- 可访问性：基于Radix UI的键盘导航与焦点管理
- 使用示例路径：下拉菜单使用示例:1-201
-
卡片 Card
- 功能：容器组件，支持头部、标题、描述、内容与底部
- 关键属性：通用HTML属性透传
- 使用示例路径：卡片使用示例
-
表格 Table
- 功能：数据表格，支持表头、表体、表尾、行、单元格与标题
- 关键属性：通用HTML属性透传
- 使用示例路径：表格使用示例
-
标签 Tabs
- 功能：标签页切换，包含列表、触发器与内容区
- 关键属性：基于Radix UI的状态同步
- 使用示例路径：标签页使用示例:1-56
-
标签 Label
- 功能：表单控件标签，与输入控件建立关联
- 关键属性：基于Radix UI的peer-disabled语义
- 使用示例路径：标签使用示例
-
徽章 Badge
- 功能：状态或分类标记
- 关键属性：variant（外观）
- 使用示例路径：徽章使用示例
章节来源
- components/ui/button.tsx:1-57
- components/ui/input.tsx:1-23
- components/ui/select.tsx:1-161
- components/ui/dialog.tsx:1-123
- components/ui/dropdown-menu.tsx:1-201
- components/ui/card.tsx:1-80
- components/ui/table.tsx:1-118
- components/ui/tabs.tsx:1-56
- components/ui/label.tsx:1-27
- components/ui/badge.tsx:1-37
架构概览
组件库围绕以下架构要素工作：
- Radix UI：提供可访问性与状态管理的底层抽象
- Tailwind CSS：提供原子化样式与主题变量
- class-variance-authority：提供变体系统，统一外观与尺寸
- clsx/tailwind-merge：安全合并类名，避免冲突
- Next.js App Router：页面级布局与路由组织
graph TB
RADIX["@radix-ui/react-*<br/>可访问性与状态"]
CVA["class-variance-authority<br/>变体系统"]
CLX["clsx + tailwind-merge<br/>类名合并"]
TW["Tailwind CSS<br/>主题与动画"]
UTILS["lib/utils.ts<br/>cn工具函数"]
COMPONENTS["components/ui/*<br/>具体组件实现"]
COMPONENTS --> RADIX
COMPONENTS --> CVA
COMPONENTS --> CLX
CLX --> TW
UTILS --> CLX
图表来源
详细组件分析
按钮 Button
- 设计要点
- 使用Slot实现asChild，允许将按钮渲染为链接或其他元素
- 通过变体系统控制外观与尺寸，保持一致的交互反馈
- 聚焦态与禁用态通过CSS类明确表达
- 可访问性
- 默认button语义，支持键盘激活
- 聚焦可见性与环形边框确保键盘用户可见
- 复杂度与性能
- O(1) 渲染开销，变体计算在编译期完成
- 使用示例
classDiagram
class Button {
+variant : "default|destructive|outline|secondary|ghost|link"
+size : "default|sm|lg|icon"
+asChild : boolean
+forwardRef<HTMLButtonElement>
}
class Slot {
+asChild : boolean
}
Button --> Slot : "可选语义化渲染"
图表来源
章节来源
对话框 Dialog
- 设计要点
- Portal确保覆盖层与内容在DOM层级上正确分离
- 基于data-state的动画类实现进入/退出过渡
- Close按钮包含不可见文本，提升屏幕阅读器可用性
- 可访问性
- 自动聚焦到内容区，Esc键关闭
- Overlay点击可关闭，支持键盘导航
- 使用示例
sequenceDiagram
participant U as "用户"
participant T as "触发器"
participant P as "Portal"
participant O as "Overlay"
participant C as "Content"
U->>T : 点击/按键激活
T->>P : 打开对话框
P->>O : 渲染覆盖层
P->>C : 渲染内容区
U->>O : 点击背景
O->>P : 关闭对话框
U->>C : Esc键
C->>P : 关闭对话框
图表来源
章节来源
下拉菜单 Dropdown Menu
- 设计要点
- 支持子菜单、复选/单选项、快捷键提示与分隔符
- 基于Portal与data-state的动画类实现流畅过渡
- 可访问性
- 键盘导航：上下左右移动、Enter确认、Esc返回
- 焦点管理：打开时聚焦首个项，关闭时返回触发器
- 使用示例
flowchart TD
Start(["打开菜单"]) --> FocusFirst["聚焦首个可选项"]
FocusFirst --> Nav{"键盘方向键"}
Nav --> |上/下| MoveFocus["移动焦点"]
Nav --> |左| SubOpen["打开子菜单"]
Nav --> |右| Select["选择项"]
Nav --> |Enter| Confirm["确认选择"]
Nav --> |Esc| Close["关闭菜单"]
MoveFocus --> Nav
SubOpen --> Nav
Select --> Close
Confirm --> Close
图表来源
章节来源
选择器 Select
- 设计要点
- 触发器包含图标与占位符，内容区支持滚动按钮
- Viewport根据触发器尺寸自适应
- 可访问性
- 键盘导航：Tab进入、方向键选择、Enter确认
- 屏幕阅读器：通过SelectValue与ItemText传达当前值与选项
- 使用示例
sequenceDiagram
participant U as "用户"
participant T as "触发器"
participant P as "Portal"
participant V as "Viewport"
participant I as "选项项"
U->>T : 点击/按键激活
T->>P : 打开内容区
P->>V : 渲染选项列表
U->>I : 键盘/鼠标选择
I->>T : 更新值并关闭
图表来源
章节来源
表格 Table
- 设计要点
- 外层容器提供横向滚动，适配窄屏设备
- 行与单元格支持hover与选中态
- 可访问性
- 表格语义清晰，适合屏幕阅读器解析
- 使用示例
flowchart TD
Container["表格容器<br/>overflow-auto"] --> Table["table 元素"]
Table --> Header["thead<br/>边框样式"]
Table --> Body["tbody<br/>悬停与选中态"]
Body --> Row["tr<br/>边框与状态"]
Row --> Cell["td/th<br/>对齐与内边距"]
图表来源
章节来源
标签 Tabs
- 设计要点
- 列表容器与触发器基于Radix UI状态同步
- 激活态提供背景与阴影强调
- 可访问性
- 键盘导航：左右移动、Tab切换内容
- 使用示例
sequenceDiagram
participant U as "用户"
participant L as "TabsList"
participant T as "TabsTrigger"
participant C as "TabsContent"
U->>T : 点击/按键激活
T->>L : 同步状态
L->>C : 显示对应内容
图表来源
章节来源
卡ード Card
- 设计要点
- 分离头部、标题、描述、内容与底部区域，便于组合
- 使用示例
classDiagram
class Card {
+HTMLDivElement
}
class CardHeader
class CardTitle
class CardDescription
class CardContent
class CardFooter
Card --> CardHeader
Card --> CardTitle
Card --> CardDescription
Card --> CardContent
Card --> CardFooter
图表来源
章节来源
标签 Label
- 设计要点
- 基于peer-disabled语义，与受控输入联动
- 使用示例
flowchart TD
Input["受控输入"] --> Peer["peer 伪类"]
Peer --> Disabled{"禁用状态"}
Disabled --> |是| LabelDisabled["标签禁用样式"]
Disabled --> |否| LabelEnabled["标签启用样式"]
图表来源
章节来源
徽章 Badge
- 设计要点
- 通过变体系统提供默认/次要/破坏/描边等外观
- 使用示例
classDiagram
class Badge {
+variant : "default|secondary|destructive|outline"
}
图表来源
章节来源
实际应用示例
仪表板页面组件应用
仪表板页面展示了组件在真实业务场景中的综合应用：
数据统计卡片组合
- 组件组合：Card + CardHeader + CardTitle + CardContent
- 应用场景：展示查询次数、引用次数、引用率、平均位置等关键指标
- 实现特点：使用动态图标与颜色方案增强视觉表达
图表集成应用
- 组件组合：Card + Chart组件
- 应用场景：展示引用趋势和平台对比数据
- 实现特点：通过条件渲染处理空数据状态
完整的数据展示流程
flowchart TD
Loading["加载状态"] --> Empty{"数据为空?"}
Empty --> |是| EmptyState["空状态展示"]
Empty --> |否| DataDisplay["数据展示"]
DataDisplay --> StatCards["统计卡片"]
DataDisplay --> Charts["图表展示"]
EmptyState --> CreateQuery["创建查询引导"]
图表来源
引用记录页面组件应用
引用记录页面体现了组件在复杂数据管理场景中的应用：
筛选表单组合
- 组件组合：Card + Label + Select + Input + Button
- 应用场景：查询词筛选、平台筛选、日期范围筛选
- 实现特点：响应式网格布局，支持表单重置
数据表格应用
- 组件组合：Table + TableRow + TableCell + Badge
- 应用场景：展示引用检测结果的完整列表
- 实现特点：支持横向滚动，徽章用于状态标识
sequenceDiagram
participant User as "用户"
participant Form as "筛选表单"
participant API as "API服务"
participant Table as "数据表格"
User->>Form : 设置筛选条件
Form->>API : 发送筛选请求
API-->>Form : 返回筛选结果
Form->>Table : 更新表格数据
Table->>User : 显示筛选后的记录
图表来源
章节来源
依赖关系分析
- 组件依赖Radix UI实现可访问性与状态管理
- 类名合并依赖clsx与tailwind-merge，确保样式不冲突
- 主题变量与圆角半径由Tailwind配置提供
- 页面通过引入UI组件实现功能组合
graph LR
P["package.json<br/>依赖声明"] --> R["@radix-ui/react-*"]
P --> CVA["class-variance-authority"]
P --> CLSX["clsx"]
P --> TWM["tailwind-merge"]
P --> TW["tailwindcss"]
BTN["button.tsx"] --> R
BTN --> CVA
BTN --> UTILS["lib/utils.ts"]
SEL["select.tsx"] --> R
SEL --> UTILS
DDL["dropdown-menu.tsx"] --> R
DDL --> UTILS
DLG["dialog.tsx"] --> R
DLG --> UTILS
TBL["table.tsx"] --> UTILS
CARD["card.tsx"] --> UTILS
TABS["tabs.tsx"] --> R
TABS --> UTILS
LABEL["label.tsx"] --> R
LABEL --> CVA
LABEL --> UTILS
BADGE["badge.tsx"] --> CVA
BADGE --> UTILS
图表来源
章节来源
性能考虑
- 组件均采用forwardRef与透传属性，减少额外包装开销
- 变体系统在编译期确定，运行时仅进行类名拼接
- Portal仅在需要时渲染，避免不必要的DOM节点
- 表格容器提供横向滚动，避免布局抖动
- 建议在大量数据场景下使用虚拟化或分页
故障排除指南
- 焦点问题
- 确保对话框与下拉菜单在打开时自动聚焦到可交互元素
- 检查Close按钮的不可见文本是否正确设置
- 动画异常
- 确认data-state类与动画类匹配
- 检查Tailwind动画插件是否正确启用
- 类名冲突
- 使用cn工具函数合并类名，避免重复覆盖
- 主题不生效
- 检查Tailwind配置中的颜色与圆角变量
- 确认content路径包含组件目录
章节来源
结论
本UI组件库以Radix UI为基础，结合Tailwind CSS与变体系统，提供了高可访问性、一致性强且易于扩展的组件集合。通过清晰的组合模式与严格的样式约定，能够支撑从简单表单到复杂数据面板的各类界面需求。新增的仪表板页面使用示例进一步验证了组件在真实业务场景中的实用性与灵活性。
附录
使用规范与最佳实践
- 组合模式
- 使用Card组合多个小部件，如统计卡片与图表
- 使用Table与Badge组合展示数据与状态
- 状态管理
- 将外部状态（如查询参数）与组件状态解耦
- 在页面级组件中集中处理加载、错误与空状态
- 无障碍支持
- 为所有交互元素提供键盘可达性
- 为图标与装饰性元素提供替代文本
- 主题与响应式
- 通过CSS变量与Tailwind变体实现主题切换
- 使用Grid与Flex在不同断点下调整布局
自定义扩展指南
- 新增组件
- 基于现有组件结构，使用forwardRef与透传属性
- 引入变体系统以支持外观与尺寸扩展
- 主题定制
- 在Tailwind配置中扩展colors与borderRadius
- 通过CSS变量统一主题色板
- 动画与过渡
- 使用data-state类与Tailwind动画插件
- 保持过渡时长与缓动曲线一致
章节来源