docs: sync stage 1.8 ui progress
This commit is contained in:
@@ -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:
|
||||
</SelectContent>
|
||||
```
|
||||
|
||||
- [ ] **Step 3: Scan**
|
||||
- [x] **Step 3: Scan**
|
||||
|
||||
Run:
|
||||
|
||||
@@ -167,7 +179,7 @@ rg "SelectContent>[\\s\\S]*SelectItem|<SelectContent>\\s*<SelectItem" frontend/s
|
||||
|
||||
Expected: no direct `SelectItem` immediately under `SelectContent`.
|
||||
|
||||
- [ ] **Step 4: Verify**
|
||||
- [x] **Step 4: Verify**
|
||||
|
||||
Run:
|
||||
|
||||
@@ -189,23 +201,23 @@ Expected: exit code 0.
|
||||
- Modify: `frontend/src/features/system/SystemRolesPage.tsx`
|
||||
- Modify: `frontend/src/features/system/SystemUserGroupsPage.tsx`
|
||||
|
||||
- [ ] **Step 1: Migrate login fields**
|
||||
- [x] **Step 1: Migrate login fields**
|
||||
|
||||
Use `AppField htmlFor="username"` and `AppField htmlFor="password"`. Inputs receive matching `id` and `aria-invalid={Boolean(error)}` only where field-specific invalid state is needed.
|
||||
|
||||
- [ ] **Step 2: Migrate create ticket fields**
|
||||
- [x] **Step 2: Migrate create ticket fields**
|
||||
|
||||
Use `AppField` for title, priority, impact scope, related system, environment, and description. Required fields use `required`.
|
||||
|
||||
- [ ] **Step 3: Migrate create solution fields**
|
||||
- [x] **Step 3: Migrate create solution fields**
|
||||
|
||||
Use `AppField` for title, status, related system, environment scope, problem signature, root cause, solution, and risk note.
|
||||
|
||||
- [ ] **Step 4: Migrate quick-create system forms**
|
||||
- [x] **Step 4: Migrate quick-create system forms**
|
||||
|
||||
Keep compact horizontal layout, but each input lives inside `AppField` so labels remain visible and shadcn field semantics are consistent.
|
||||
|
||||
- [ ] **Step 5: Verify**
|
||||
- [x] **Step 5: Verify**
|
||||
|
||||
Run:
|
||||
|
||||
@@ -223,7 +235,7 @@ Expected: both exit code 0.
|
||||
**Files:**
|
||||
- All modified frontend files
|
||||
|
||||
- [ ] **Step 1: Run shadcn context check**
|
||||
- [x] **Step 1: Run shadcn context check**
|
||||
|
||||
Run:
|
||||
|
||||
@@ -233,7 +245,7 @@ $env:NODE_USE_ENV_PROXY = "1"; $env:HTTP_PROXY = "http://127.0.0.1:7897"; $env:H
|
||||
|
||||
Expected: current project remains `Vite`, `Tailwind v3`, `radix-nova`, `lucide`.
|
||||
|
||||
- [ ] **Step 2: Run source scans**
|
||||
- [x] **Step 2: Run source scans**
|
||||
|
||||
Run:
|
||||
|
||||
@@ -245,6 +257,8 @@ Expected: no new violations in migrated surfaces. Remaining non-button decorativ
|
||||
|
||||
- [ ] **Step 3: Browser checks**
|
||||
|
||||
User explicitly disabled visual/browser assistance during the Stage 1.8 UI pass, so browser checks remain pending until visual assistance is re-enabled.
|
||||
|
||||
Check desktop and mobile widths for:
|
||||
- Login
|
||||
- Workbench
|
||||
@@ -254,7 +268,7 @@ Check desktop and mobile widths for:
|
||||
|
||||
Expected: mobile has navigation entry, no horizontal scroll, forms have visible labels.
|
||||
|
||||
- [ ] **Step 4: Commit**
|
||||
- [x] **Step 4: Commit**
|
||||
|
||||
Run:
|
||||
|
||||
@@ -264,4 +278,3 @@ git commit -m "feat: standardize shadcn admin ui foundation"
|
||||
```
|
||||
|
||||
Expected: commit created on current branch.
|
||||
|
||||
|
||||
Reference in New Issue
Block a user