159 lines
4.6 KiB
Markdown
159 lines
4.6 KiB
Markdown
# Boss Admin Backoffice Redesign Implementation Plan
|
|
|
|
> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
|
|
|
|
**Goal:** Rebuild `/admin` into a PC To B operations backoffice with a dashboard, customer workspace, permission workspace, and risk/governance command center.
|
|
|
|
**Architecture:** Keep the existing Next.js App Router route and existing admin APIs. Refactor the current client shell into focused React components under `src/components/admin/`, reusing `/api/v1/admin/overview`, `/api/v1/admin/access`, `/api/v1/admin/risks/actions`, and `/api/v1/admin/skills/requests`.
|
|
|
|
**Tech Stack:** Next.js 16 App Router, React 19, Ant Design, `@refinedev/core`, TypeScript source tests with `node:test`.
|
|
|
|
---
|
|
|
|
### Task 1: Source Tests For New Admin Structure
|
|
|
|
**Files:**
|
|
- Modify: `tests/admin-refine-page.test.ts`
|
|
|
|
- [ ] **Step 1: Update the admin structure assertions**
|
|
|
|
Replace the old page shell expectations with assertions for these strings:
|
|
|
|
```ts
|
|
for (const title of ["平台运营驾驶舱", "客户与账号", "授权工作台", "风险与治理"]) {
|
|
assert.match(source, new RegExp(title));
|
|
}
|
|
for (const title of ["今日待处理", "客户健康排行", "关键风险队列", "节点健康"]) {
|
|
assert.match(source, new RegExp(title));
|
|
}
|
|
assert.doesNotMatch(source, /window\.prompt/);
|
|
```
|
|
|
|
- [ ] **Step 2: Run the focused test**
|
|
|
|
Run:
|
|
|
|
```bash
|
|
npx tsx --test tests/admin-refine-page.test.ts
|
|
```
|
|
|
|
Expected: fail until the component is refactored.
|
|
|
|
### Task 2: Admin Shell And Navigation
|
|
|
|
**Files:**
|
|
- Modify: `src/components/admin/boss-admin-app.tsx`
|
|
|
|
- [ ] **Step 1: Replace top tabs with PC backoffice navigation**
|
|
|
|
Implement a left-side navigation with four keys: `dashboard`, `customers`, `permissions`, `governance`.
|
|
|
|
- [ ] **Step 2: Keep Refine data provider mounted**
|
|
|
|
Keep:
|
|
|
|
```tsx
|
|
<Refine dataProvider={createBossAdminDataProvider(initialOverview ?? undefined)} resources={resources}>
|
|
```
|
|
|
|
Expected: existing data provider tests continue to pass.
|
|
|
|
### Task 3: Dashboard
|
|
|
|
**Files:**
|
|
- Modify: `src/components/admin/boss-admin-app.tsx`
|
|
|
|
- [ ] **Step 1: Build metric cards**
|
|
|
|
Use existing `summary`, `companies`, `devices`, `risks`, `notifications`.
|
|
|
|
- [ ] **Step 2: Build key queues**
|
|
|
|
Dashboard must include:
|
|
|
|
```tsx
|
|
"今日待处理"
|
|
"客户健康排行"
|
|
"关键风险队列"
|
|
"节点健康"
|
|
"最近事件"
|
|
```
|
|
|
|
Expected: no big full-width table as the first visual object.
|
|
|
|
### Task 4: Customer And Permission Workspaces
|
|
|
|
**Files:**
|
|
- Modify: `src/components/admin/boss-admin-app.tsx`
|
|
- Reuse: `src/components/admin/admin-access-panel.tsx`
|
|
|
|
- [ ] **Step 1: Add customer overview section**
|
|
|
|
Show company table, account table, and customer onboarding hints.
|
|
|
|
- [ ] **Step 2: Mount `AdminAccessPanel` under 授权工作台**
|
|
|
|
Keep the existing working mutation path, but wrap it in clearer page copy and narrower visual hierarchy.
|
|
|
|
### Task 5: Risk Command Center
|
|
|
|
**Files:**
|
|
- Modify: `src/components/admin/boss-admin-app.tsx`
|
|
|
|
- [ ] **Step 1: Replace prompt-based actions**
|
|
|
|
Remove `window.prompt` for assigning owner and SLA. Use controlled inline inputs and buttons.
|
|
|
|
- [ ] **Step 2: Keep existing risk actions**
|
|
|
|
Continue posting:
|
|
|
|
```ts
|
|
{ riskId, action: "assign_owner", ownerAccount }
|
|
{ riskId, action: "set_sla", slaDueAt }
|
|
{ riskId, action: "ack" }
|
|
{ riskId, action: "resolve" }
|
|
{ riskId, action: "create_repair_ticket" }
|
|
```
|
|
|
|
### Task 6: Skill Governance
|
|
|
|
**Files:**
|
|
- Modify: `src/components/admin/boss-admin-app.tsx`
|
|
- Reuse: `src/components/admin/admin-skill-lifecycle-panel.tsx`
|
|
|
|
- [ ] **Step 1: Move Skill lifecycle panel under 风险与治理**
|
|
|
|
Use a nested Ant Design `Tabs` with `风险战情室` and `Skill 生命周期`.
|
|
|
|
### Task 7: Verification
|
|
|
|
**Files:**
|
|
- Test: `tests/admin-refine-page.test.ts`
|
|
- Test: `tests/admin-overview-route.test.ts`
|
|
- Test: `tests/admin-risk-actions-route.test.ts`
|
|
- Test: `tests/admin-skill-lifecycle-panel-source.test.ts`
|
|
|
|
- [ ] **Step 1: Run focused admin tests**
|
|
|
|
```bash
|
|
npx tsx --test tests/admin-refine-page.test.ts tests/admin-overview-route.test.ts tests/admin-risk-actions-route.test.ts tests/admin-skill-lifecycle-panel-source.test.ts
|
|
```
|
|
|
|
Expected: all pass.
|
|
|
|
- [ ] **Step 2: Run lint/build**
|
|
|
|
```bash
|
|
npm run lint
|
|
npm run build
|
|
```
|
|
|
|
Expected: both pass.
|
|
|
|
## Self-review
|
|
|
|
- Spec coverage: covers dashboard, customer workspace, permission workspace, risk command center, Skill governance, testing.
|
|
- Placeholder scan: no TBD/TODO language.
|
|
- Type consistency: component names and existing endpoints match current code.
|