56 lines
1.7 KiB
Markdown
56 lines
1.7 KiB
Markdown
# Frontend Design System
|
|
|
|
## Principles
|
|
|
|
- Build product screens from shadcn/ui primitives and project-owned App components.
|
|
- Keep operational pages dense, quiet, and optimized for repeated use.
|
|
- Use semantic status colors for ticket state, priority, audit, AI, and system feedback.
|
|
- User-facing frontend text must be Chinese-first. Internal TypeScript names and API field names may stay English.
|
|
- Business pages must not create one-off table, filter, detail, status, or priority patterns.
|
|
|
|
## Tokens
|
|
|
|
Theme tokens live in `frontend/src/styles/globals.css` and are exposed through Tailwind in
|
|
`frontend/tailwind.config.ts`.
|
|
|
|
Core tokens:
|
|
|
|
- `background`, `foreground`, `surface`, `border`
|
|
- `muted`, `muted-foreground`
|
|
- `primary`, `success`, `warning`, `danger`, `info`, `ai`
|
|
|
|
## Components
|
|
|
|
shadcn/ui primitives live in `frontend/src/components/ui` and should remain close to generated shadcn APIs:
|
|
|
|
- `Button`
|
|
- `Badge`
|
|
- `Card`, `CardHeader`, `CardContent`, `CardTitle`, `CardDescription`
|
|
- `Input`, `Textarea`, `Select`
|
|
- `Table`
|
|
- `Dialog`, `Sheet`, `DropdownMenu`, `Tabs`, `Tooltip`, `Skeleton`, `Sonner`
|
|
|
|
Product App components live in `frontend/src/components/app` and are the preferred page-level API:
|
|
|
|
- `AppSidebar`
|
|
- `AppTopbar`
|
|
- `AppPageHeader`
|
|
- `AppDataTable`
|
|
- `AppFilterBar`
|
|
- `AppDetailLayout`
|
|
- `AppSection`
|
|
- `AppEmptyState`
|
|
- `AppStatusBadge`
|
|
- `AppPriorityBadge`
|
|
|
|
Business pages should use:
|
|
|
|
- `AppDataTable` for repeated table/list surfaces.
|
|
- `AppFilterBar` for search and filter controls.
|
|
- `AppDetailLayout` for detail pages with main content and side panels.
|
|
- `AppStatusBadge` and `AppPriorityBadge` for ticket lifecycle and priority presentation.
|
|
|
|
Preview page:
|
|
|
|
- `frontend/src/features/design-system/DesignSystemPreview.tsx`
|