diff --git a/README.md b/README.md index d1fbf1c..88f9a4b 100644 --- a/README.md +++ b/README.md @@ -6,12 +6,15 @@ The product centers on support tickets and business knowledge, with configurable ## Current Status -Design phase. See: +Active implementation. The project has a runnable Django + React baseline with ticket workflow, reusable solutions, enterprise governance, shadcn-based frontend foundation, and Docker Compose local startup. + +Key docs: - [Product design spec](docs/superpowers/specs/2026-06-30-ai-ticket-platform-design.md) - [Design discussion log](docs/communication/2026-06-30-ai-ticket-platform-discussion-log.md) - [Implementation roadmap](docs/superpowers/plans/2026-06-30-ai-ticket-platform-implementation-roadmap.md) -- [Stage 0 implementation plan](docs/superpowers/plans/2026-06-30-stage-0-foundation-design-system.md) +- [Local setup](docs/development/local-setup.md) +- [Frontend design system](docs/frontend/design-system.md) ## Target Stack diff --git a/docs/frontend/design-system.md b/docs/frontend/design-system.md index e2b6fa7..bc4caa7 100644 --- a/docs/frontend/design-system.md +++ b/docs/frontend/design-system.md @@ -7,6 +7,7 @@ - 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. +- Admin UI should feel calm and enterprise-grade: clear hierarchy, restrained surfaces, compact actions, and no decorative marketing-style layout. ## Tokens @@ -18,6 +19,14 @@ Core tokens: - `background`, `foreground`, `surface`, `border` - `muted`, `muted-foreground` - `primary`, `success`, `warning`, `danger`, `info`, `ai` +- `sidebar`, `sidebar-foreground`, `sidebar-primary`, `sidebar-accent`, `sidebar-border` + +Theme behavior: + +- `AppThemeProvider` uses `next-themes` with `light`, `dark`, and `system`. +- `AppThemeToggle` is rendered in `AppTopbar` and exposes Chinese options: `亮色`, `暗色`, `跟随系统`. +- Light and dark mode values must both be defined in `frontend/src/styles/globals.css`; do not add one-off `dark:` color overrides in business pages. +- Sidebar colors must come from `sidebar*` tokens so the sidebar follows theme switching. ## Components @@ -34,6 +43,9 @@ Product App components live in `frontend/src/components/app` and are the preferr - `AppSidebar` - `AppTopbar` +- `AppThemeProvider` +- `AppThemeToggle` +- `AppPage` - `AppPageHeader` - `AppDataTable` - `AppFilterBar` @@ -49,6 +61,15 @@ Business pages should use: - `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. +- `AppField` for form labels and required state; direct page-level `Label` usage should be avoided. +- `SelectContent > SelectGroup > SelectItem` for every select menu. + +## Current Core Screens + +- Ticket center uses an operations-table layout: the first column combines ticket number, title, requester, and description; workflow state and priority are grouped together. +- Ticket detail uses `AppDetailLayout`, a ticket overview card, a real event timeline, and a side column for metadata, linked solutions, and AI analysis placeholder. +- Ticket status transitions require a handling note through `TicketTransitionDialog`. +- System governance quick-create forms use `AppSection`, `FieldGroup`, and `AppField`. Preview page: diff --git a/docs/superpowers/plans/2026-07-02-stage-1-8-shadcn-admin-ui-standardization.md b/docs/superpowers/plans/2026-07-02-stage-1-8-shadcn-admin-ui-standardization.md index 657db3d..f66843f 100644 --- a/docs/superpowers/plans/2026-07-02-stage-1-8-shadcn-admin-ui-standardization.md +++ b/docs/superpowers/plans/2026-07-02-stage-1-8-shadcn-admin-ui-standardization.md @@ -24,6 +24,18 @@ - Modify: `frontend/src/features/system/SystemUsersPage.tsx`, `SystemRolesPage.tsx`, `SystemUserGroupsPage.tsx` - migrate quick-create forms where practical. - Test/verify: `npm run typecheck`, `npm run build`, grep scans, desktop/mobile browser checks. +## Implementation Progress + +As of 2026-07-02, the Stage 1.8 foundation has been implemented and extended with core ticket page polish: + +- Mobile sidebar navigation is available through a shadcn `Sheet`. +- shadcn `Field` primitives are installed and `AppField` is the project wrapper. +- Select menus have been swept to use `SelectContent > SelectGroup > SelectItem`. +- Login, ticket, solution, and system quick-create forms have been migrated toward `AppField`. +- `AppPage`, `AppDataTable`, `AppFilterBar`, and system governance page shells have been standardized. +- Enterprise visual foundation, light/dark/system theme switching, and sidebar theme tokens are in place. +- Ticket center and ticket detail have been refined as core Stage 1 operational screens. + --- ### Task 1: Mobile Shell Navigation @@ -33,7 +45,7 @@ - Modify: `frontend/src/components/app/AppSidebar.tsx` - Modify: `frontend/src/components/app/AppTopbar.tsx` -- [ ] **Step 1: Inspect current shell boundaries** +- [x] **Step 1: Inspect current shell boundaries** Run: @@ -45,23 +57,23 @@ Get-Content frontend/src/components/app/AppTopbar.tsx Expected: `AppShell` renders fixed sidebar and topbar; sidebar is desktop-only. -- [ ] **Step 2: Add mobile menu state in shell** +- [x] **Step 2: Add mobile menu state in shell** Implement `mobileNavOpen` state in `AppShell`, pass `onMobileMenuClick` into topbar, and pass `mobileOpen/onMobileOpenChange` into sidebar. -- [ ] **Step 3: Extract sidebar navigation content** +- [x] **Step 3: Extract sidebar navigation content** In `AppSidebar`, extract grouped nav rendering into `SidebarNavContent({ onNavigate })`. Use the same component for desktop and mobile sheet. -- [ ] **Step 4: Render mobile Sheet** +- [x] **Step 4: Render mobile Sheet** Use existing shadcn `Sheet`, `SheetContent`, `SheetHeader`, and `SheetTitle`. The sheet title must be present for accessibility. Menu item clicks call `onNavigate`. -- [ ] **Step 5: Add topbar mobile trigger** +- [x] **Step 5: Add topbar mobile trigger** Add a `Button size="icon" variant="ghost"` visible below `lg`, with `Menu` icon using `data-icon` and `aria-label="打开导航"`. -- [ ] **Step 6: Verify** +- [x] **Step 6: Verify** Run: @@ -81,7 +93,7 @@ Expected: exit code 0. - May modify: `frontend/src/components/ui/separator.tsx` - Modify: `frontend/src/components/app/AppField.tsx` -- [ ] **Step 1: Preview CLI changes** +- [x] **Step 1: Preview CLI changes** Run: @@ -91,7 +103,7 @@ $env:NODE_USE_ENV_PROXY = "1"; $env:HTTP_PROXY = "http://127.0.0.1:7897"; $env:H Expected: creates `field.tsx`, previews updates to `label.tsx` and `separator.tsx`. -- [ ] **Step 2: Inspect diffs before applying** +- [x] **Step 2: Inspect diffs before applying** Run: @@ -103,15 +115,15 @@ $env:NODE_USE_ENV_PROXY = "1"; $env:HTTP_PROXY = "http://127.0.0.1:7897"; $env:H Expected: understand local changes before applying. -- [ ] **Step 3: Add the field component** +- [x] **Step 3: Add the field component** Apply the CLI result, then inspect changed files. If `label.tsx` or `separator.tsx` overwrite local customizations, restore needed local behavior manually. -- [ ] **Step 4: Rebuild AppField** +- [x] **Step 4: Rebuild AppField** Make `AppField` render shadcn `Field`, `FieldLabel`, and optional `FieldDescription`. Support `htmlFor`, `required`, `invalid`, and `description` props. -- [ ] **Step 5: Verify** +- [x] **Step 5: Verify** Run: @@ -133,11 +145,11 @@ Expected: exit code 0. - Modify: `frontend/src/features/solutions/SolutionCreatePage.tsx` - Modify: `frontend/src/features/design-system/DesignSystemPreview.tsx` -- [ ] **Step 1: Add SelectGroup imports** +- [x] **Step 1: Add SelectGroup imports** For each file importing select primitives, add `SelectGroup`. -- [ ] **Step 2: Wrap select items** +- [x] **Step 2: Wrap select items** Change: @@ -157,7 +169,7 @@ to: ``` -- [ ] **Step 3: Scan** +- [x] **Step 3: Scan** Run: @@ -167,7 +179,7 @@ rg "SelectContent>[\\s\\S]*SelectItem|\\s*