wenzi/docs/plans/2026-02-10-admin-best-practices-extensions.md

# Admin Best-Practice Extensions Implementation Plan

> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.

**Goal:** 按行业最佳实践补齐 Admin 前端未完成能力（列表统一、导出字段选择、审批/风控/奖励/用户闭环、权限矩阵）。
**Architecture:** 通过通用组件（FilterPaginationBar + ListSection + ExportFieldPanel）统一列表体验；以 demo store 驱动闭环操作并写入审计。
**Tech Stack:** Vue 3, Pinia, Vue Router, Vite, TypeScript, Tailwind

---

## Constraints
- 不新增第三方依赖。
- 不执行 git commit（如需提交请明确指示）。

---

### Task 1: 统一列表组件（ListSection）

**Files:**
- Create: `frontend/admin/src/components/ListSection.vue`
- Modify: `frontend/admin/src/views/ActivityListView.vue`
- Modify: `frontend/admin/src/views/RewardsView.vue`
- Modify: `frontend/admin/src/views/RiskView.vue`
- Modify: `frontend/admin/src/views/AuditLogView.vue`
- Modify: `frontend/admin/src/views/ApprovalCenterView.vue`
- Modify: `frontend/admin/src/views/UsersView.vue`
- Modify: `frontend/admin/src/views/NotificationsView.vue`

**Step 1: Create ListSection skeleton**
- Slots: `title`, `subtitle`, `filters`, `actions`, default list slot, `empty`, `footer`.

**Step 2: Replace per-page header wrappers**
- Use ListSection for title + filters + actions, keep FilterPaginationBar inside.

**Step 3: Verify layout parity**
- Manual check each page layout.

---

### Task 2: 导出字段选择（ExportFieldPanel）

**Files:**
- Create: `frontend/admin/src/components/ExportFieldPanel.vue`
- Create: `frontend/admin/src/composables/useExportFields.ts`
- Modify: `frontend/admin/src/views/ActivityDetailView.vue`
- Modify: `frontend/admin/src/views/RewardsView.vue`
- Modify: `frontend/admin/src/views/AuditLogView.vue`
- Modify: `frontend/admin/src/App.vue`

**Step 1: ExportFieldPanel**
- Props: `fields`, `selected`, `title`.
- Emits: `update:selected`, `export`.

**Step 2: useExportFields**
- Encapsulate selection state + default fields.

**Step 3: Wire to pages**
- Replace fixed导出 with字段选择面板 + 导出按钮。

---

### Task 3: 审批流补齐（规则/SLA/通知）

**Files:**
- Modify: `frontend/admin/src/views/ApprovalCenterView.vue`
- Modify: `frontend/admin/src/services/demo/DemoDataService.ts`
- Modify: `frontend/admin/src/views/NotificationsView.vue`

**Step 1: Add SLA hints**
- Display “待审批时长/超时” badges.

**Step 2: Batch reject reason**
- Add input for batch rejection reason.

**Step 3: Notify**
- Append notification entries for approval decisions.

---

### Task 4: 风控闭环（告警→处置→审计）

**Files:**
- Modify: `frontend/admin/src/views/RiskView.vue`
- Modify: `frontend/admin/src/services/demo/DemoDataService.ts`
- Modify: `frontend/admin/src/stores/audit.ts`

**Step 1: Add alert list**
- Alert status: 未处理/处理中/已关闭.

**Step 2: Add actions**
- Mark as processing/closed with audit log.

---

### Task 5: 奖励闭环（批次/重试/回滚原因）

**Files:**
- Modify: `frontend/admin/src/views/RewardsView.vue`
- Modify: `frontend/admin/src/services/demo/DemoDataService.ts`

**Step 1: Add batch info**
- Show batch id / status.

**Step 2: Add retry & rollback reason**
- Input reason and log to audit.

---

### Task 6: 用户闭环（邀请/到期/重发/历史筛选）

**Files:**
- Modify: `frontend/admin/src/views/InviteUserView.vue`
- Modify: `frontend/admin/src/views/UserDetailView.vue`
- Modify: `frontend/admin/src/stores/users.ts`

**Step 1: Invite list + resend/expire**
- Add invite list with actions and status.

**Step 2: Role history filters**
- Filter by status/time range.

---

### Task 7: 权限矩阵页

**Files:**
- Create: `frontend/admin/src/views/PermissionsView.vue`
- Modify: `frontend/admin/src/router/index.ts`
- Modify: `frontend/admin/src/App.vue`

**Step 1: Render matrix**
- Roles vs permissions grid (read-only).

---

## Manual Verification (post-implementation)
1. 每个页面列表均使用 ListSection + FilterPaginationBar。
2. 导出弹出字段选择面板并生成 CSV。
3. 审批 SLA/拒绝原因/通知可见。
4. 风控告警可处置并写审计。
5. 奖励批次/回滚原因可操作。
6. 邀请列表支持重发/到期，用户历史可筛选。
7. 权限矩阵页可访问。

---

## Execution Handoff
Plan complete and saved to `docs/plans/2026-02-10-admin-best-practices-extensions.md`. Two execution options:

1. Subagent-Driven (this session) - I dispatch fresh subagent per task, review between tasks, fast iteration
2. Parallel Session (separate) - Open new session with executing-plans, batch execution with checkpoints

Which approach?