前端整合开源组件

docs/superpowers/plans/2026-04-12-admin-oss-refactor.md

@@ -64,6 +64,201 @@ cd front && npm run build
 
 Expected: both commands pass.
 
+### Task 9: Replace Hand-Styled Admin Search And Filter Inputs
+
+**Files:**
+- Modify: `front/src/admin/users-list.tsx`
+- Modify: `front/src/admin/files-list.tsx`
+- Modify: `front/src/admin/shares.tsx`
+- Modify: `front/src/admin/fileblobs.tsx`
+- Modify: `front/src/admin/tasks.tsx`
+- Modify: `front/src/admin/audits.tsx`
+
+- [ ] **Step 1: Replace search and filter inputs with the shared admin input**
+
+Target:
+
+```text
+- 用户策略: 搜索框
+- 文件治理: 文件名 / 所属用户
+- 分享治理: 用户 / 文件名 / Token
+- 对象治理: 用户 / 策略 ID / 对象键
+- 任务监控: 多个筛选输入
+- 审计日志: actor / action / targetType / targetId
+```
+
+- [ ] **Step 2: Verify Batch 9**
+
+Run:
+
+```bash
+cd front && npm run lint
+cd front && npm run build
+```
+
+Expected: both commands pass.
+
+### Task 8: Replace Hand-Styled Admin Text And Number Inputs
+
+**Files:**
+- Add: `front/src/components/admin/AdminInput.tsx`
+- Modify: `front/src/admin/users-list.tsx`
+
+> Current execution scope for this batch is limited to `users-list.tsx`.
+
+- [x] **Step 1: Add reusable admin input primitives**
+
+Expected:
+
+```text
+- expose shared admin text/number input styling
+- support form registration and controlled usage
+- keep current focus, disabled, and validation affordances
+```
+
+- [x] **Step 2: Replace editable inputs in configuration-heavy pages**
+
+Target:
+
+```text
+- 用户策略: 存储配额 / 最大上传限制 / 手动密码
+```
+
+- [x] **Step 3: Verify Batch 8**
+
+Run:
+
+```bash
+cd front && npm run lint
+cd front && npm run build
+```
+
+Expected: both commands pass.
+
+### Task 6: Replace Hand-Rolled Admin Select Controls
+
+**Files:**
+- Modify: `front/package.json`
+- Modify: `front/package-lock.json`
+- Add: `front/src/components/admin/AdminSelect.tsx`
+- Modify: `front/src/admin/shares.tsx`
+- Modify: `front/src/admin/fileblobs.tsx`
+- Modify: `front/src/admin/tasks.tsx`
+- Modify: `front/src/admin/storage-policies-list.tsx`
+
+- [x] **Step 1: Add a reusable admin select wrapper based on Radix Select**
+
+Expected:
+
+```text
+- install an OSS select dependency
+- expose a shared admin-styled select wrapper
+- support placeholder, controlled value, and option groups used by admin pages
+```
+
+- [x] **Step 2: Replace filter selects in governance pages**
+
+Target:
+
+```text
+- 分享治理: 密码保护 / 过期状态
+- 对象治理: 实体类型
+- 任务监控: 每页条数
+```
+
+- [x] **Step 3: Replace modal selects in storage policies**
+
+Target:
+
+```text
+- 新建 / 编辑策略: 驱动协议
+- 发起迁移: 目标策略选择
+```
+
+- [x] **Step 4: Verify Batch 6**
+
+Run:
+
+```bash
+cd front && npm run lint
+cd front && npm run build
+```
+
+Expected: both commands pass.
+
+### Task 7: Replace The Remaining Admin Form Select
+
+**Files:**
+- Modify: `front/src/admin/users-list.tsx`
+
+- [x] **Step 1: Replace the user role field with the shared admin select**
+
+Target:
+
+```text
+- 用户策略: role 字段
+- 保持 react-hook-form 校验和提交逻辑不变
+```
+
+- [x] **Step 2: Verify Batch 7**
+
+Run:
+
+```bash
+cd front && npm run lint
+cd front && npm run build
+```
+
+Expected: both commands pass.
+
+### Task 5: Replace Hand-Rolled Admin Modal Shells
+
+**Files:**
+- Modify: `front/package.json`
+- Modify: `front/package-lock.json`
+- Add: `front/src/components/admin/AdminDialog.tsx`
+- Modify: `front/src/admin/storage-policies-list.tsx`
+- Modify: `front/src/admin/users-list.tsx`
+
+- [x] **Step 1: Add a reusable admin dialog wrapper based on Radix Dialog**
+
+Expected:
+
+```text
+- install an OSS dialog dependency
+- expose a shared admin-styled modal/sheet wrapper
+- support centered modal and right-side panel layouts
+```
+
+- [x] **Step 2: Replace storage policy form and migration overlays**
+
+Target:
+
+```text
+- 新建 / 编辑策略弹层
+- 发起迁移弹层
+```
+
+- [x] **Step 3: Replace the user strategy editor shell**
+
+Target:
+
+```text
+- 用对话框 / 侧栏承载用户策略编辑
+- 保留当前表单与快捷操作逻辑
+```
+
+- [x] **Step 4: Verify Batch 5**
+
+Run:
+
+```bash
+cd front && npm run lint
+cd front && npm run build
+```
+
+Expected: both commands pass.
+
 ### Task 2: Replace Admin List Tables With `@tanstack/react-table`
 
 **Files:**
@@ -139,3 +334,58 @@ cd front && npm run build
 ```
 
 Expected: both commands pass.
+
+### Task 4: Replace Native Admin Alerts And Confirms
+
+**Files:**
+- Modify: `front/package.json`
+- Modify: `front/package-lock.json`
+- Add: `front/src/components/admin/AdminAlertDialog.tsx`
+- Modify: `front/src/admin/settings.tsx`
+- Modify: `front/src/admin/shares.tsx`
+- Modify: `front/src/admin/files-list.tsx`
+- Modify: `front/src/admin/filesystem.tsx`
+- Modify: `front/src/admin/fileblobs.tsx`
+- Modify: `front/src/admin/audits.tsx`
+
+- [x] **Step 1: Add a reusable admin alert dialog wrapper**
+
+Expected:
+
+```text
+- install an OSS dialog dependency
+- expose a shared admin-styled alert dialog wrapper
+- keep current Tailwind visual system intact
+```
+
+- [x] **Step 2: Replace destructive confirm actions with in-app dialogs**
+
+Target:
+
+```text
+- 系统设置: 轮换邀请码
+- 分享治理: 删除分享
+- 文件治理: 彻底删除
+```
+
+- [x] **Step 3: Replace remaining admin alert feedback with page-level notices**
+
+Target:
+
+```text
+- 文件系统: 复制失败
+- 对象实体: 复制失败
+- 审计日志: 复制失败
+- 分享治理: 复制成功 / 失败
+```
+
+- [x] **Step 4: Verify Batch 4**
+
+Run:
+
+```bash
+cd front && npm run lint
+cd front && npm run build
+```
+
+Expected: both commands pass.