演示

Shadcn 组件

基础 Shadcn UI 组件已打包在 @quan-erp/shared-ui 中。请从 shared-ui 导入，不要在插件中安装或复制 shadcn/ui。

Quan ERP 如何使用 Shadcn

Quan ERP 设计系统基于 Shadcn。插件 UI 的唯一来源是 @quan-erp/shared-ui。

  • 始终从 @quan-erp/shared-ui 导入
  • 不要在插件中运行 shadcn CLI 或添加 components.json
  • 不要在插件中直接安装 radix / shadcn 包
  • API 与 variants 详见各页链接的官方 Shadcn Doc
Shadcn UIShadcn Components

本 Doc 目录

按分类浏览。每个组件页包含 shared-ui 导入与对应的 Shadcn Doc 链接。

  • Shadcn Form & Input — Button, Input, Select, Checkbox, Switch, Label, Form, …
  • Shadcn Layout & Navigation — Accordion, Tabs, Breadcrumb, Sidebar, Separator, …
  • Shadcn Overlays & Dialogs — Dialog, Sheet, Drawer, Popover, Dropdown Menu, …
  • Shadcn Feedback & Status — Alert, Badge, Skeleton, Progress, Toast / Sonner, …
  • Shadcn Display & Media — Card, Table, Avatar, Item, Chart, Carousel, …
  • Shadcn Misc — Collapsible, Toggle, Pagination, Direction, …

ERP 专用 Doc

部分原语另有 Quan ERP 封装或模式说明。

  • Forms — Form + Zod 完整栈
  • Responsive Dialog — Dialog / Drawer / Sheet
  • Calendar — 多变体
  • cn — className 工具

导入方式

TSXimport
import { Button, Card, CardContent, Input } from "@quan-erp/shared-ui"; // Prefer shared-ui — do not copy from ui.shadcn.com into the plugin