docs: add stage 1.8 shadcn ui standardization plan

docs/superpowers/specs/2026-07-02-stage-1-8-shadcn-admin-ui-standardization-design.md

@@ -0,0 +1,77 @@
+# Stage 1.8 Shadcn Admin UI Standardization Design
+
+## Goal
+
+Stage 1.8 upgrades the frontend from page-by-page polish into a stable enterprise admin UI foundation. All website UI must use shadcn/ui as the unified component library and visual source of truth.
+
+## Principles
+
+- Use shadcn/ui first. Business pages compose `@/components/ui/*` and the project App component layer; no second UI library.
+- Keep frontend display text Chinese, concise, and operational.
+- Use shadcn semantic tokens for color: `background`, `foreground`, `card`, `muted`, `primary`, `secondary`, `border`, `ring`, `destructive`.
+- Do not introduce a separate theme system. `theme-factory` is used only as a quality checklist for contrast, responsive behavior, spacing, and perceived polish.
+- Prefer dense but calm enterprise admin screens over marketing layouts, oversized hero blocks, decorative gradients, or AI-purple visual identity.
+
+## Scope
+
+### P1 Mobile Navigation
+
+The current desktop sidebar is hidden on small screens, while the shell only reserves desktop left padding. Stage 1.8 adds a mobile navigation entry in the top bar and renders the same menu tree inside a shadcn `Sheet`.
+
+Expected behavior:
+- Desktop keeps fixed sidebar.
+- Mobile shows a menu button in the top bar.
+- Tapping the button opens a side sheet with the same grouped navigation.
+- Tapping a menu item closes the sheet.
+- Logged-in users can navigate to every visible enabled module on mobile.
+
+### P2 Form Standardization
+
+Forms must migrate toward shadcn `FieldGroup`, `Field`, `FieldLabel`, and `FieldDescription` primitives. The project `AppField` remains only as a thin wrapper around shadcn field primitives, not as a custom label/grid replacement.
+
+Expected behavior:
+- Required fields have visible labels.
+- Invalid fields can express `data-invalid` and `aria-invalid`.
+- Form layout uses `FieldGroup` and `Field` instead of raw `div` stacks.
+- Login, create ticket, create solution, and system management quick-create forms become the first migrated surfaces.
+
+### P2 Select Composition
+
+Every shadcn select menu must use `SelectContent > SelectGroup > SelectItem`. Direct `SelectItem` children under `SelectContent` are not allowed.
+
+First migrated surfaces:
+- Ticket filter bar
+- Ticket create priority
+- Ticket comments visibility
+- Solution list status filter
+- Solution create status
+- Design system preview select
+
+### P3 Brand and Admin Visual Standard
+
+Brand identity should come from consistent admin structure, not decorative theme divergence.
+
+Visual baseline:
+- Platform mark: compact text mark for `AI 工单平台`.
+- Sidebar: grouped navigation, clear active state, consistent icon scale.
+- Topbar: mobile menu, workspace breadcrumb, environment badge, user actions.
+- Content: consistent page width, gutters, card/table density, and section spacing.
+- No decorative gradients, emoji icons, or raw color palettes in business pages.
+
+## Migration Order
+
+1. Shell and navigation foundation.
+2. shadcn field component integration.
+3. Select composition sweep.
+4. High-frequency forms migration.
+5. Page visual pass for login, workbench, tickets, solutions, and system governance.
+
+## Verification
+
+- `npm run typecheck`
+- `npm run build`
+- `npx shadcn@latest info` with local proxy env
+- Source scan for direct `SelectContent > SelectItem` patterns
+- Source scan for form pages still using placeholder-only labels
+- Browser checks at desktop width and mobile width for login, dashboard, tickets, create ticket, and system users
+