演示

UI Components

从 @quan-erp/shared-ui 导入 UI —— 基于 Shadcn 的 Quan ERP 插件设计系统。优先使用共享组件，而不是原生 HTML 或第三方 UI 包。

Shadcn 基础组件

所有基础 Shadcn 组件均由 @quan-erp/shared-ui 再导出。在本 Doc 的 Shadcn 分类中查看导入与用法，完整 API 请打开官方 Shadcn 站点。

  • 表单与输入 — Button、Input、Select、…
  • 布局与导航 — Tabs、Accordion、…
  • 浮层与对话框 — Dialog、Sheet、Drawer、…
  • 反馈与状态 — Alert、Badge、Skeleton、…
  • 展示与媒体 — Card、Table、Avatar、…
  • 其他 — Collapsible、Toggle、Pagination、…
Shadcn UIShadcn Components

包说明

始终从 @quan-erp/shared-ui 导入组件、hooks 和 cn。不要在插件中单独安装 Shadcn 或其他 UI 库。

  • Pages — Page shell
  • cn — 条件 className
  • Forms — Form + Zod
  • Responsive Dialog / Calendar / query states / hooks / portal styles
  • Side menu、Home shortcuts、Setting、Report、Dashboard、Change Log — AppRegistry / base-frontend UI
  • Pull to refresh、Floating action button、Menu icons、Workflow nodes — shared-ui / base-frontend 组件

导入规则

  • 不要从 @quan-erp/shared-ui 导入 RequestDto / ResponseDto —— 使用 @quan-erp/shared-frontend-core
  • ChangeLog 及其 hooks 来自 @quan-erp/base-frontend —— 不是 shared-ui
TSXdto
import { RequestDto, ResponseDto } from "@quan-erp/shared-frontend-core"; import { Button } from "@quan-erp/shared-ui";

优先使用共享组件

  • <button> → Button / ButtonGroup
  • 裸表单 + register() → Form + FormField + FormControl + FormMessage + Zod
  • 手写面板 → Card 系列
  • 自定义加载/空/错误 → LoadingState / EmptyState / ErrorState / Alert
  • 自定义列表行 → Item 系列
  • 状态标签 → Badge
  • 条件 className 字符串 → cn