docyrus-app-ui-design

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Docyrus App UI Design

Docyrus应用UI设计

Build polished, accessible UI components for Docyrus React applications using a curated set of 127+ pre-built components from shadcn, diceui, animate-ui, docyrus-ui, and reui libraries.

为Docyrus React应用构建精致、易用的UI组件，可从shadcn、diceui、animate-ui、docyrus-ui和reui库中挑选127+个预先构建的组件。

Component Library Preferences

组件库偏好

Primary component libraries (in order of preference):

shadcn — 43 core components (buttons, forms, dialogs, tables, charts)
diceui — 42 advanced components (data grids, kanban, file upload, color picker)
animate-ui — 21 animated components (sidebar, dialogs, cards, menus)
docyrus — 19 Docyrus-specific components (data grid, form fields, value renderers)
reui — 2 utility components (file upload, sortable)

Total available: 127 components

首选组件库（按优先级排序）：

shadcn — 43个核心组件（按钮、表单、对话框、表格、图表）
diceui — 42个高级组件（数据网格、看板、文件上传、颜色选择器）
animate-ui — 21个动画组件（侧边栏、对话框、卡片、菜单）
docyrus — 19个Docyrus专属组件（数据网格、表单字段、值渲染器）
reui — 2个实用组件（文件上传、可排序组件）

可用组件总数：127个

Critical Design Rules

关键设计规则

Always check preferred components first — Before implementing any new component, search the preferred components reference to find an existing match.
Use AwesomeCard for dashboards — Unless the user specifically requests a different card design, use
```
@docyrus/ui-awesome-card
```
for dashboard stat cards and metrics.
Use animate-ui Sidebar for layouts — Unless the user requests a different layout, use
```
@animate-ui/sidebar
```
for app navigation.
Prefer Recharts for charting — Use Recharts as the first choice for all data visualization needs. shadcn Chart components are built on Recharts.
Icon library preference order:
- First choice: hugeicons
- Second choice: fontawesome light
- Third choice: lucide-icons

优先检查首选组件 — 在实现任何新组件之前，先在首选组件参考文档中搜索是否有现成的匹配组件。
仪表盘使用AwesomeCard — 除非用户明确要求不同的卡片设计，否则仪表盘统计卡片和指标使用
```
@docyrus/ui-awesome-card
```
。
布局使用animate-ui侧边栏 — 除非用户要求不同的布局，否则应用导航使用
```
@animate-ui/sidebar
```
。
图表优先使用Recharts — 所有数据可视化需求优先选择Recharts。shadcn的Chart组件基于Recharts构建。
图标库偏好顺序：
- 首选：hugeicons
- 次选：fontawesome light
- 第三选择：lucide-icons

Quick Start Patterns

快速入门模式

Dashboard with AwesomeCard

使用AwesomeCard的仪表盘

tsx

import { AwesomeCard } from '@/components/ui/awesome-card'
import { HugeIcon } from '@/components/ui/icons'

<AwesomeCard
  title="Total Revenue"
  value="$124,500"
  icon={<HugeIcon name="dollar-circle" />}
  trend={{ value: 12.5, direction: 'up' }}
/>

tsx

import { AwesomeCard } from '@/components/ui/awesome-card'
import { HugeIcon } from '@/components/ui/icons'

<AwesomeCard
  title="Total Revenue"
  value="$124,500"
  icon={<HugeIcon name="dollar-circle" />}
  trend={{ value: 12.5, direction: 'up' }}
/>

App Layout with animate-ui Sidebar

使用animate-ui侧边栏的应用布局

tsx

import { Sidebar, SidebarContent, SidebarHeader } from '@/components/ui/sidebar'

<Sidebar>
  <SidebarHeader>
    <AppLogo />
  </SidebarHeader>
  <SidebarContent>
    <NavItems />
  </SidebarContent>
</Sidebar>

tsx

import { Sidebar, SidebarContent, SidebarHeader } from '@/components/ui/sidebar'

<Sidebar>
  <SidebarHeader>
    <AppLogo />
  </SidebarHeader>
  <SidebarContent>
    <NavItems />
  </SidebarContent>
</Sidebar>

Data Table with diceui

使用diceui的数据表格

tsx

import { DataTable } from '@/components/ui/data-table'

<DataTable
  columns={columns}
  data={projects}
  enableFiltering
  enableSorting
  enablePagination
/>

tsx

import { DataTable } from '@/components/ui/data-table'

<DataTable
  columns={columns}
  data={projects}
  enableFiltering
  enableSorting
  enablePagination
/>

Charts with shadcn + Recharts

使用shadcn + Recharts的图表

tsx

import { ChartContainer, ChartTooltip } from '@/components/ui/chart'
import { LineChart, Line, XAxis, YAxis } from 'recharts'

<ChartContainer>
  <LineChart data={chartData}>
    <XAxis dataKey="month" />
    <YAxis />
    <ChartTooltip />
    <Line type="monotone" dataKey="revenue" />
  </LineChart>
</ChartContainer>

tsx

import { ChartContainer, ChartTooltip } from '@/components/ui/chart'
import { LineChart, Line, XAxis, YAxis } from 'recharts'

<ChartContainer>
  <LineChart data={chartData}>
    <XAxis dataKey="month" />
    <YAxis />
    <ChartTooltip />
    <Line type="monotone" dataKey="revenue" />
  </LineChart>
</ChartContainer>

Component Selection Strategy

组件选择策略

When the user requests a UI component:

Search the reference — Check
```
references/preferred-components-catalog.md
```
for existing components by name, category, or functionality
Match by use case — If multiple options exist, prefer:
- shadcn for basic/common components
- diceui for advanced/specialized components
- animate-ui for components requiring animation/transitions
- docyrus for Docyrus-specific data handling
Install the component — Use the registry install command from the catalog
Reference the docs — Point to the component's doc file for detailed usage

当用户请求UI组件时：

搜索参考文档 — 查看
```
references/preferred-components-catalog.md
```
，按名称、类别或功能查找现有组件
按用例匹配 — 如果有多个选项，优先选择：
- shadcn用于基础/通用组件
- diceui用于高级/专业组件
- animate-ui用于需要动画/过渡效果的组件
- docyrus用于Docyrus专属的数据处理组件
安装组件 — 使用组件目录中的注册表安装命令
参考文档 — 查看组件的文档文件获取详细使用说明

Installation Pattern

安装模式

All components follow the shadcn registry pattern:

bash

undefined

所有组件均遵循shadcn注册表模式：

bash

undefined

shadcn components

pnpm dlx shadcn@latest add button

diceui components

pnpm dlx shadcn@latest add @diceui/data-table

animate-ui components

pnpm dlx shadcn@latest add @animate-ui/sidebar

docyrus components

pnpm dlx shadcn@latest add @docyrus/ui-awesome-card

reui components

pnpm dlx shadcn@latest add @reui/file-upload-default

undefined

pnpm dlx shadcn@latest add @reui/file-upload-default

undefined

Common Use Cases

常见用例

Use Case	Preferred Component	Library
Dashboard cards	AwesomeCard	docyrus
App navigation	Sidebar	animate-ui
Data tables	DataTable	diceui
Editable grids	Data Grid	docyrus
Forms	Form Fields	docyrus
File upload	File Upload	diceui
Charts	Chart + Recharts	shadcn
Dialogs	Responsive Dialog	diceui
Date picker	Date Time Picker	docyrus
Color picker	Color Picker	diceui
Kanban board	Kanban	diceui
Timeline	Timeline	diceui
Rating	Rating	diceui

用场景	首选组件	库
仪表盘卡片	AwesomeCard	docyrus
应用导航	Sidebar	animate-ui
数据表格	DataTable	diceui
可编辑网格	Data Grid	docyrus
表单	Form Fields	docyrus
文件上传	File Upload	diceui
图表	Chart + Recharts	shadcn
对话框	Responsive Dialog	diceui
日期选择器	Date Time Picker	docyrus
颜色选择器	Color Picker	diceui
看板	Kanban	diceui
时间线	Timeline	diceui
评分	Rating	diceui

References

参考资料

Read these files for detailed component information:

references/preferred-components-catalog.md
— Complete catalog of all 127 components with descriptions, install commands, and doc paths
references/component-selection-guide.md
— Decision trees and guidelines for choosing the right component for each use case
references/icon-usage-guide.md
— Icon library integration patterns and usage examples for hugeicons, fontawesome, and lucide

查看以下文件获取组件详细信息：

references/preferred-components-catalog.md
— 包含所有127个组件的完整目录，含描述、安装命令和文档路径
references/component-selection-guide.md
— 组件选择的决策树和指南，帮助为每个用例选择合适的组件
references/icon-usage-guide.md
— hugeicons、fontawesome和lucide图标的库集成模式及使用示例

Integration with docyrus-app-dev

与docyrus-app-dev的集成

This skill works alongside

docyrus-app-dev

for full-stack app development:

docyrus-app-dev handles data fetching, collections, queries, auth
docyrus-app-ui-design handles component selection, UI design, layout

When building a feature:

Use
```
docyrus-app-dev
```
to set up data queries and mutations
Use
```
docyrus-app-ui-design
```
to select and implement UI components
Combine them for complete, polished features

此技能与

docyrus-app-dev

配合使用，可进行全栈应用开发：

docyrus-app-dev 负责数据获取、集合、查询、认证
docyrus-app-ui-design 负责组件选择、UI设计、布局

构建功能时：

使用
```
docyrus-app-dev
```
设置数据查询和变更
使用
```
docyrus-app-ui-design
```
选择并实现UI组件
结合两者完成精致的完整功能