diff --git a/docs/superpowers/plans/2026-04-12-admin-oss-refactor.md b/docs/superpowers/plans/2026-04-12-admin-oss-refactor.md
index bb87bac..4247bb6 100644
--- a/docs/superpowers/plans/2026-04-12-admin-oss-refactor.md
+++ b/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.
diff --git a/front/package-lock.json b/front/package-lock.json
index 1cb9466..962180d 100644
--- a/front/package-lock.json
+++ b/front/package-lock.json
@@ -9,6 +9,9 @@
       "version": "0.0.0",
       "dependencies": {
         "@google/genai": "^1.29.0",
+        "@radix-ui/react-alert-dialog": "^1.1.15",
+        "@radix-ui/react-dialog": "^1.1.15",
+        "@radix-ui/react-select": "^2.2.6",
         "@tailwindcss/vite": "^4.1.14",
         "@tanstack/react-table": "^8.21.3",
         "@vitejs/plugin-react": "^5.0.4",
@@ -713,6 +716,44 @@
         "node": ">=18"
       }
     },
+    "node_modules/@floating-ui/core": {
+      "version": "1.7.5",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.5.tgz",
+      "integrity": "sha512-1Ih4WTWyw0+lKyFMcBHGbb5U5FtuHJuujoyyr5zTaWS5EYMeT6Jb2AuDeftsCsEuchO+mM2ij5+q9crhydzLhQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.11"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.7.6",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.6.tgz",
+      "integrity": "sha512-9gZSAI5XM36880PPMm//9dfiEngYoC6Am2izES1FF406YFsjvyBMmeJ2g4SAju3xWwtuynNRFL2s9hgxpLI5SQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/core": "^1.7.5",
+        "@floating-ui/utils": "^0.2.11"
+      }
+    },
+    "node_modules/@floating-ui/react-dom": {
+      "version": "2.1.8",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.8.tgz",
+      "integrity": "sha512-cC52bHwM/n/CxS87FH0yWdngEZrjdtLW/qVruo68qg+prK7ZQ4YGdut2GyDVpoGeAYe/h899rVeOVm6Oi40k2A==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/dom": "^1.7.6"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.11",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.11.tgz",
+      "integrity": "sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==",
+      "license": "MIT"
+    },
     "node_modules/@google/genai": {
       "version": "1.49.0",
       "resolved": "https://registry.npmjs.org/@google/genai/-/genai-1.49.0.tgz",
@@ -845,6 +886,590 @@
       "integrity": "sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw==",
       "license": "BSD-3-Clause"
     },
+    "node_modules/@radix-ui/number": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/number/-/number-1.1.1.tgz",
+      "integrity": "sha512-MkKCwxlXTgz6CFoJx3pCwn07GKp36+aZyu/u2Ln2VrA5DcdyCZkASEDBTd8x5whTQQL5CiYf4prXKLcgQdv29g==",
+      "license": "MIT"
+    },
+    "node_modules/@radix-ui/primitive": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.3.tgz",
+      "integrity": "sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==",
+      "license": "MIT"
+    },
+    "node_modules/@radix-ui/react-alert-dialog": {
+      "version": "1.1.15",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-alert-dialog/-/react-alert-dialog-1.1.15.tgz",
+      "integrity": "sha512-oTVLkEw5GpdRe29BqJ0LSDFWI3qu0vR1M0mUkOQWDIUnY/QIkLpgDMWuKxP94c2NAC2LGcgVhG1ImF3jkZ5wXw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-dialog": "1.1.15",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-slot": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-arrow": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.7.tgz",
+      "integrity": "sha512-F+M1tLhO+mlQaOWspE8Wstg+z6PwxwRd8oQ8IXceWz92kfAmalTRf0EjrouQeo7QssEPfCn05B4Ihs1K9WQ/7w==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-collection": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.7.tgz",
+      "integrity": "sha512-Fh9rGN0MoI4ZFUNyfFVNU4y9LUz93u9/0K+yLgA2bwRojxM8JU1DyvvMBabnZPBgMWREAJvU2jjVzq+LrFUglw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-slot": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.2.tgz",
+      "integrity": "sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-context": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.2.tgz",
+      "integrity": "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dialog": {
+      "version": "1.1.15",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.15.tgz",
+      "integrity": "sha512-TCglVRtzlffRNxRMEyR36DGBLJpeusFcgMVD9PZEzAKnUs1lKCgX5u9BmC2Yg+LL9MgZDugFFs1Vl+Jp4t/PGw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-dismissable-layer": "1.1.11",
+        "@radix-ui/react-focus-guards": "1.1.3",
+        "@radix-ui/react-focus-scope": "1.1.7",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-portal": "1.1.9",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-slot": "1.2.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "aria-hidden": "^1.2.4",
+        "react-remove-scroll": "^2.6.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-direction": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.1.1.tgz",
+      "integrity": "sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dismissable-layer": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.11.tgz",
+      "integrity": "sha512-Nqcp+t5cTB8BinFkZgXiMJniQH0PsUt2k51FUhbdfeKvc4ACcG2uQniY/8+h1Yv6Kza4Q7lD7PQV0z0oicE0Mg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-escape-keydown": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-focus-guards": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.3.tgz",
+      "integrity": "sha512-0rFg/Rj2Q62NCm62jZw0QX7a3sz6QCQU0LpZdNrJX8byRGaGVTqbrW9jAoIAHyMQqsNpeZ81YgSizOt5WXq0Pw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-focus-scope": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.1.7.tgz",
+      "integrity": "sha512-t2ODlkXBQyn7jkl6TNaw/MtVEVvIGelJDCG41Okq/KwUsJBwQ4XVZsHAVUkK4mBv3ewiAS3PGuUWuY2BoK4ZUw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-id": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.1.tgz",
+      "integrity": "sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popper": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.8.tgz",
+      "integrity": "sha512-0NJQ4LFFUuWkE7Oxf0htBKS6zLkkjBH+hM1uk7Ng705ReR8m/uelduy1DBo0PyBXPKVnBA6YBlU94MBGXrSBCw==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/react-dom": "^2.0.0",
+        "@radix-ui/react-arrow": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-layout-effect": "1.1.1",
+        "@radix-ui/react-use-rect": "1.1.1",
+        "@radix-ui/react-use-size": "1.1.1",
+        "@radix-ui/rect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-portal": {
+      "version": "1.1.9",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.9.tgz",
+      "integrity": "sha512-bpIxvq03if6UNwXZ+HTK71JLh4APvnXntDc6XOX8UVq4XQOVl7lwok0AvIl+b8zgCw3fSaVTZMpAPPagXbKmHQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-presence": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.5.tgz",
+      "integrity": "sha512-/jfEwNDdQVBCNvjkGit4h6pMOzq8bHkopq458dPt2lMjx+eBQUohZNG9A7DtO/O5ukSbxuaNGXMjHicgwy6rQQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-primitive": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.3.tgz",
+      "integrity": "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-select": {
+      "version": "2.2.6",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-select/-/react-select-2.2.6.tgz",
+      "integrity": "sha512-I30RydO+bnn2PQztvo25tswPH+wFBjehVGtmagkU78yMdwTwVf12wnAOF+AeP8S2N8xD+5UPbGhkUfPyvT+mwQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/number": "1.1.1",
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-dismissable-layer": "1.1.11",
+        "@radix-ui/react-focus-guards": "1.1.3",
+        "@radix-ui/react-focus-scope": "1.1.7",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-popper": "1.2.8",
+        "@radix-ui/react-portal": "1.1.9",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-slot": "1.2.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1",
+        "@radix-ui/react-use-previous": "1.1.1",
+        "@radix-ui/react-visually-hidden": "1.2.3",
+        "aria-hidden": "^1.2.4",
+        "react-remove-scroll": "^2.6.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-slot": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-callback-ref": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.1.tgz",
+      "integrity": "sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-controllable-state": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.2.2.tgz",
+      "integrity": "sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-effect-event": "0.0.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-effect-event": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-effect-event/-/react-use-effect-event-0.0.2.tgz",
+      "integrity": "sha512-Qp8WbZOBe+blgpuUT+lw2xheLP8q0oatc9UpmiemEICxGvFLYmHm9QowVZGHtJlGbS6A6yJ3iViad/2cVjnOiA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-escape-keydown": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.1.1.tgz",
+      "integrity": "sha512-Il0+boE7w/XebUHyBjroE+DbByORGR9KKmITzbR7MyQ4akpORYP/ZmbhAr0DG7RmmBqoOnZdy2QlvajJ2QA59g==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-callback-ref": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-layout-effect": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.1.tgz",
+      "integrity": "sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-previous": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-previous/-/react-use-previous-1.1.1.tgz",
+      "integrity": "sha512-2dHfToCj/pzca2Ck724OZ5L0EVrr3eHRNsG/b3xQJLA2hZpVCS99bLAX+hm1IHXDEnzU6by5z/5MIY794/a8NQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-rect": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.1.1.tgz",
+      "integrity": "sha512-QTYuDesS0VtuHNNvMh+CjlKJ4LJickCMUAqjlE3+j8w+RlRpwyX3apEQKGFzbZGdo7XNG1tXa+bQqIE7HIXT2w==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/rect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-size": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.1.1.tgz",
+      "integrity": "sha512-ewrXRDTAqAXlkl6t/fkXWNAhFX9I+CkKlw6zjEwk86RSPKwZr3xpBRso655aqYafwtnbpHLj6toFzmd6xdVptQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-visually-hidden": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.2.3.tgz",
+      "integrity": "sha512-pzJq12tEaaIhqjbzpCuv/OypJY/BPavOofm+dbab+MHLajy277+1lLm6JFcGgF5eskJ6mquGirhXY2GD/8u8Ug==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/rect": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.1.1.tgz",
+      "integrity": "sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==",
+      "license": "MIT"
+    },
     "node_modules/@rolldown/pluginutils": {
       "version": "1.0.0-rc.3",
       "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-rc.3.tgz",
@@ -1678,6 +2303,18 @@
         "node": ">= 14"
       }
     },
+    "node_modules/aria-hidden": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.6.tgz",
+      "integrity": "sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/array-flatten": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
@@ -2003,6 +2640,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/detect-node-es": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
+      "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==",
+      "license": "MIT"
+    },
     "node_modules/dotenv": {
       "version": "17.4.1",
       "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-17.4.1.tgz",
@@ -2463,6 +3106,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/get-nonce": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-nonce/-/get-nonce-1.0.1.tgz",
+      "integrity": "sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/get-proto": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
@@ -3382,6 +4034,53 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-remove-scroll": {
+      "version": "2.7.2",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.7.2.tgz",
+      "integrity": "sha512-Iqb9NjCCTt6Hf+vOdNIZGdTiH1QSqr27H/Ek9sv/a97gfueI/5h1s3yRi1nngzMUaOOToin5dI1dXKdXiF+u0Q==",
+      "license": "MIT",
+      "dependencies": {
+        "react-remove-scroll-bar": "^2.3.7",
+        "react-style-singleton": "^2.2.3",
+        "tslib": "^2.1.0",
+        "use-callback-ref": "^1.3.3",
+        "use-sidecar": "^1.1.3"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-remove-scroll-bar": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.8.tgz",
+      "integrity": "sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q==",
+      "license": "MIT",
+      "dependencies": {
+        "react-style-singleton": "^2.2.2",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-router": {
       "version": "7.14.0",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.14.0.tgz",
@@ -3433,6 +4132,28 @@
         "url": "https://opencollective.com/express"
       }
     },
+    "node_modules/react-style-singleton": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.3.tgz",
+      "integrity": "sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==",
+      "license": "MIT",
+      "dependencies": {
+        "get-nonce": "^1.0.0",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/resolve-pkg-maps": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/resolve-pkg-maps/-/resolve-pkg-maps-1.0.0.tgz",
@@ -3845,6 +4566,49 @@
         "browserslist": ">= 4.21.0"
       }
     },
+    "node_modules/use-callback-ref": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.3.tgz",
+      "integrity": "sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/use-sidecar": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.3.tgz",
+      "integrity": "sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ==",
+      "license": "MIT",
+      "dependencies": {
+        "detect-node-es": "^1.1.0",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/utils-merge": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
diff --git a/front/package.json b/front/package.json
index 7d8c6a9..16adc1b 100644
--- a/front/package.json
+++ b/front/package.json
@@ -12,6 +12,9 @@
   },
   "dependencies": {
     "@google/genai": "^1.29.0",
+    "@radix-ui/react-alert-dialog": "^1.1.15",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-select": "^2.2.6",
     "@tailwindcss/vite": "^4.1.14",
     "@tanstack/react-table": "^8.21.3",
     "@vitejs/plugin-react": "^5.0.4",
diff --git a/front/src/admin/audits.tsx b/front/src/admin/audits.tsx
index ac7deaf..901b598 100644
--- a/front/src/admin/audits.tsx
+++ b/front/src/admin/audits.tsx
@@ -99,6 +99,7 @@ export default function AdminAuditsPage() {
   const [loading, setLoading] = useState(true);
   const [refreshing, setRefreshing] = useState(false);
   const [error, setError] = useState('');
+  const [notice, setNotice] = useState('');
   const [filters, setFilters] = useState(DEFAULT_FILTERS);
   const [page, setPage] = useState<{
     items: AdminAuditLog[];
@@ -134,8 +135,11 @@ export default function AdminAuditsPage() {
   async function copyText(value: string) {
     try {
       await navigator.clipboard.writeText(value);
+      setNotice('审计详情已复制');
+      setError('');
     } catch {
-      window.alert('复制失败，请手动复制。');
+      setError('复制失败，请手动复制。');
+      setNotice('');
     }
   }
 
@@ -179,6 +183,12 @@ export default function AdminAuditsPage() {
         </button>
       </div>
 
+      {notice ? (
+        <div className="mb-8 rounded-lg border border-blue-500/20 bg-blue-500/10 px-6 py-4 text-xs font-bold uppercase tracking-widest text-blue-600 dark:text-blue-300">
+          {notice}
+        </div>
+      ) : null}
+
       <form
         onSubmit={(event) => {
           event.preventDefault();
diff --git a/front/src/admin/fileblobs.tsx b/front/src/admin/fileblobs.tsx
index 277b076..c5a268c 100644
--- a/front/src/admin/fileblobs.tsx
+++ b/front/src/admin/fileblobs.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useState, type ReactNode } from 'react';
 import { AlertTriangle, CheckCircle2, Copy, FileBox, RefreshCw, Search, ShieldAlert, XCircle } from 'lucide-react';
 import { motion } from 'motion/react';
+import { AdminSelect } from '@/src/components/admin/AdminSelect';
 import { cn } from '@/src/lib/utils';
 import { formatBytes, formatDateTime } from '@/src/lib/format';
 import {
@@ -114,6 +115,7 @@ export default function AdminFileBlobs() {
   const [loading, setLoading] = useState(true);
   const [refreshing, setRefreshing] = useState(false);
   const [error, setError] = useState('');
+  const [notice, setNotice] = useState('');
   const [filters, setFilters] = useState(DEFAULT_FILTERS);
   const [page, setPage] = useState<{
     items: AdminFileBlobResponse[];
@@ -166,8 +168,11 @@ export default function AdminFileBlobs() {
 
     try {
       await navigator.clipboard.writeText(value);
+      setNotice('对象键已复制');
+      setError('');
     } catch {
-      window.alert('复制失败，请手动复制。');
+      setError('复制失败，请手动复制。');
+      setNotice('');
     }
   }
 
@@ -214,6 +219,12 @@ export default function AdminFileBlobs() {
         </div>
       </div>
 
+      {notice ? (
+        <div className="mb-8 rounded-lg border border-blue-500/20 bg-blue-500/10 px-6 py-4 text-xs font-bold uppercase tracking-widest text-blue-600 dark:text-blue-300">
+          {notice}
+        </div>
+      ) : null}
+
       <motion.section variants={container} initial="hidden" animate="show" className="mb-10 grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-4">
         <motion.div variants={itemVariants}>
           {metricCard({
@@ -285,7 +296,7 @@ export default function AdminFileBlobs() {
             />
           </label>
           <label className="group relative block">
-            <select
+            <AdminSelect
               value={filters.entityType}
               onChange={(event) =>
                 setFilters((current) => ({
@@ -293,7 +304,7 @@ export default function AdminFileBlobs() {
                   entityType: event.target.value as AdminFileBlobEntityType | '',
                 }))
               }
-              className="w-full rounded-lg border border-white/10 bg-white/10 px-5 py-4 outline-none transition-all font-black text-[11px] uppercase tracking-widest focus:border-blue-500/50 focus:ring-4 focus:ring-blue-500/10"
+              className="w-full font-black text-[11px] uppercase tracking-widest"
             >
               <option value="">全部实体类型</option>
               {Object.entries(ENTITY_TYPE_LABELS).map(([value, label]) => (
@@ -301,7 +312,7 @@ export default function AdminFileBlobs() {
                   {label}
                 </option>
               ))}
-            </select>
+            </AdminSelect>
           </label>
         </div>
 
diff --git a/front/src/admin/files-list.tsx b/front/src/admin/files-list.tsx
index 474fc45..46326bf 100644
--- a/front/src/admin/files-list.tsx
+++ b/front/src/admin/files-list.tsx
@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react';
 import { RefreshCw, Search, Trash2, Folder, FileText, ChevronRight } from 'lucide-react';
 import { motion } from 'motion/react';
 import { cn } from '@/src/lib/utils';
+import { AdminAlertDialog } from '@/src/components/admin/AdminAlertDialog';
 import { deleteAdminFile, listAdminFiles, type AdminFile } from '@/src/lib/admin';
 import { formatBytes, formatDateTime } from '@/src/lib/format';
 
@@ -26,6 +27,7 @@ export default function AdminFilesList() {
   const [query, setQuery] = useState('');
   const [ownerQuery, setOwnerQuery] = useState('');
   const [files, setFiles] = useState<AdminFile[]>([]);
+  const [pendingDeleteFile, setPendingDeleteFile] = useState<AdminFile | null>(null);
 
   async function loadFiles(nextQuery = query, nextOwnerQuery = ownerQuery) {
     setError('');
@@ -43,6 +45,21 @@ export default function AdminFilesList() {
     void loadFiles();
   }, []);
 
+  async function handleConfirmDeleteFile() {
+    if (!pendingDeleteFile) {
+      return;
+    }
+
+    const target = pendingDeleteFile;
+    setPendingDeleteFile(null);
+    try {
+      await deleteAdminFile(target.id);
+      await loadFiles();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : '彻底删除文件失败');
+    }
+  }
+
   return (
     <motion.div 
       initial={{ opacity: 0 }}
@@ -148,13 +165,7 @@ export default function AdminFilesList() {
                       <td className="px-8 py-5 text-right">
                         <button
                           type="button"
-                          onClick={async () => {
-                            if (!window.confirm(`确认物理擦除 ${file.filename} 吗？此操作将触发硬件级销毁。`)) {
-                              return;
-                            }
-                            await deleteAdminFile(file.id);
-                            await loadFiles();
-                          }}
+                          onClick={() => setPendingDeleteFile(file)}
                           className="p-2.5 rounded-lg glass-panel hover:bg-red-600 hover:text-white text-red-500 border border-white/10 transition-all opacity-0 group-hover:opacity-100 shadow-sm"
                           title="彻底删除"
                         >
@@ -176,6 +187,22 @@ export default function AdminFilesList() {
           </div>
         )}
       </div>
+
+      <AdminAlertDialog
+        open={pendingDeleteFile !== null}
+        title="彻底删除文件"
+        description={
+          pendingDeleteFile
+            ? `确认物理擦除 ${pendingDeleteFile.filename} 吗？此操作将触发硬件级销毁。`
+            : ''
+        }
+        confirmLabel="确认删除"
+        cancelLabel="取消"
+        confirmTone="danger"
+        busy={loading && pendingDeleteFile !== null}
+        onConfirm={handleConfirmDeleteFile}
+        onCancel={() => setPendingDeleteFile(null)}
+      />
     </motion.div>
   );
 }
diff --git a/front/src/admin/filesystem.tsx b/front/src/admin/filesystem.tsx
index c2a66bd..1e69848 100644
--- a/front/src/admin/filesystem.tsx
+++ b/front/src/admin/filesystem.tsx
@@ -69,10 +69,12 @@ function sectionTitle(title: string, subtitle: string) {
 export default function AdminFilesystem() {
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState('');
+  const [notice, setNotice] = useState('');
   const [filesystem, setFilesystem] = useState<AdminFilesystemResponse | null>(null);
 
   async function loadFilesystem() {
     setError('');
+    setNotice('');
     try {
       setFilesystem(await getAdminFilesystem());
     } catch (err) {
@@ -92,8 +94,11 @@ export default function AdminFilesystem() {
     }
     try {
       await navigator.clipboard.writeText(value);
+      setNotice('标识已复制');
+      setError('');
     } catch {
-      window.alert('复制失败，请手动复制。');
+      setError('复制失败，请手动复制。');
+      setNotice('');
     }
   }
 
@@ -165,6 +170,7 @@ export default function AdminFilesystem() {
       </div>
 
       {error ? <div className="mb-8 rounded-lg border border-red-500/20 bg-red-500/10 px-6 py-4 text-xs font-bold uppercase tracking-widest text-red-600 dark:text-red-400">{error}</div> : null}
+      {notice ? <div className="mb-8 rounded-lg border border-blue-500/20 bg-blue-500/10 px-6 py-4 text-xs font-bold uppercase tracking-widest text-blue-600 dark:text-blue-300">{notice}</div> : null}
 
       {loading && !filesystem ? (
         <div className="glass-panel-no-hover rounded-lg px-4 py-16 text-center text-[10px] font-black uppercase tracking-widest opacity-40">正在读取文件系统快照...</div>
diff --git a/front/src/admin/settings.tsx b/front/src/admin/settings.tsx
index 4bede59..441d9b2 100644
--- a/front/src/admin/settings.tsx
+++ b/front/src/admin/settings.tsx
@@ -3,6 +3,8 @@ import { useForm } from 'react-hook-form';
 import { Copy, Database, RefreshCw, RotateCcw, Save, Server, Settings, Shield, Clock3, Layers3 } from 'lucide-react';
 import { motion } from 'motion/react';
 import { cn } from '@/src/lib/utils';
+import { AdminAlertDialog } from '@/src/components/admin/AdminAlertDialog';
+import { AdminInput } from '@/src/components/admin/AdminInput';
 import {
   getAdminSettings,
   rotateAdminRegistrationInviteCode,
@@ -139,6 +141,7 @@ export default function AdminSettingsPage() {
   const [refreshing, setRefreshing] = useState(false);
   const [savingInviteCode, setSavingInviteCode] = useState(false);
   const [rotatingInviteCode, setRotatingInviteCode] = useState(false);
+  const [rotateInviteDialogOpen, setRotateInviteDialogOpen] = useState(false);
   const [savingTransferLimit, setSavingTransferLimit] = useState(false);
   const [error, setError] = useState('');
   const [notice, setNotice] = useState('');
@@ -208,10 +211,6 @@ export default function AdminSettingsPage() {
   }
 
   async function handleRotateInviteCode() {
-    if (!window.confirm('确定要轮换邀请码吗？旧邀请码会立即失效。')) {
-      return;
-    }
-
     setRotatingInviteCode(true);
     setError('');
     setNotice('');
@@ -226,6 +225,11 @@ export default function AdminSettingsPage() {
     }
   }
 
+  async function handleConfirmRotateInviteCode() {
+    setRotateInviteDialogOpen(false);
+    await handleRotateInviteCode();
+  }
+
   async function handleSaveTransferLimit(values: OfflineTransferLimitFormValues) {
     const nextLimit = values.offlineTransferStorageLimitBytes;
     if (!Number.isInteger(nextLimit) || nextLimit <= 0) {
@@ -384,7 +388,7 @@ export default function AdminSettingsPage() {
                       <span className="mb-2 block text-[9px] font-black uppercase tracking-[0.25em] opacity-30">
                         编辑邀请码
                       </span>
-                      <input
+                      <AdminInput
                         {...inviteCodeForm.register('inviteCode', {
                           required: '邀请码不能为空',
                           maxLength: {
@@ -396,7 +400,6 @@ export default function AdminSettingsPage() {
                         maxLength={64}
                         placeholder="输入新的邀请码"
                         aria-invalid={inviteCodeForm.formState.errors.inviteCode ? 'true' : 'false'}
-                        className="w-full rounded-lg border border-white/10 bg-white/10 px-4 py-4 font-mono text-[12px] font-black tracking-[0.25em] outline-none transition-all placeholder:opacity-20 focus:border-blue-500/50 focus:ring-4 focus:ring-blue-500/10"
                       />
                       {inviteCodeForm.formState.errors.inviteCode ? (
                         <div className="mt-2 text-[10px] font-bold uppercase tracking-[0.15em] text-red-500 dark:text-red-400">
@@ -415,7 +418,7 @@ export default function AdminSettingsPage() {
                       </button>
                       <button
                         type="button"
-                        onClick={handleRotateInviteCode}
+                        onClick={() => setRotateInviteDialogOpen(true)}
                         disabled={savingInviteCode || rotatingInviteCode}
                         className="inline-flex items-center justify-center gap-2 rounded-lg border border-white/10 bg-white/5 px-5 py-4 text-[11px] font-black uppercase tracking-[0.15em] transition-all hover:bg-white/15 disabled:cursor-not-allowed disabled:opacity-60"
                       >
@@ -467,7 +470,7 @@ export default function AdminSettingsPage() {
                       <span className="mb-2 block text-[9px] font-black uppercase tracking-[0.25em] opacity-30">
                         输入新的字节数
                       </span>
-                      <input
+                      <AdminInput
                         type="number"
                         min={1}
                         step={1}
@@ -478,7 +481,6 @@ export default function AdminSettingsPage() {
                             Number.isInteger(value) && value > 0 ? true : '离线快传存储上限必须是大于 0 的整数',
                         })}
                         aria-invalid={offlineTransferLimitForm.formState.errors.offlineTransferStorageLimitBytes ? 'true' : 'false'}
-                        className="w-full rounded-lg border border-white/10 bg-white/10 px-4 py-4 font-mono text-[12px] font-black tracking-[0.2em] outline-none transition-all placeholder:opacity-20 focus:border-amber-500/50 focus:ring-4 focus:ring-amber-500/10"
                       />
                       {offlineTransferLimitForm.formState.errors.offlineTransferStorageLimitBytes ? (
                         <div className="mt-2 text-[10px] font-bold uppercase tracking-[0.15em] text-red-500 dark:text-red-400">
@@ -615,6 +617,18 @@ export default function AdminSettingsPage() {
           </section>
         </motion.div>
       ) : null}
+
+      <AdminAlertDialog
+        open={rotateInviteDialogOpen}
+        title="轮换邀请码"
+        description="旧邀请码会立即失效，新的邀请码将覆盖当前注册入口。"
+        confirmLabel="确认轮换"
+        cancelLabel="取消"
+        confirmTone="warning"
+        busy={rotatingInviteCode}
+        onConfirm={handleConfirmRotateInviteCode}
+        onCancel={() => setRotateInviteDialogOpen(false)}
+      />
     </motion.div>
   );
 }
diff --git a/front/src/admin/shares.tsx b/front/src/admin/shares.tsx
index db7fbb7..55a9876 100644
--- a/front/src/admin/shares.tsx
+++ b/front/src/admin/shares.tsx
@@ -8,7 +8,9 @@ import {
   type ColumnDef,
   type RowData,
 } from '@tanstack/react-table';
+import { AdminSelect } from '@/src/components/admin/AdminSelect';
 import { cn } from '@/src/lib/utils';
+import { AdminAlertDialog } from '@/src/components/admin/AdminAlertDialog';
 import { formatBytes, formatDateTime } from '@/src/lib/format';
 import { deleteAdminShare, getAdminShares, type AdminShare } from '@/src/lib/admin-shares';
 
@@ -70,9 +72,11 @@ function boolBadge(active: boolean, activeLabel: string, inactiveLabel: string,
 export default function AdminShares() {
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState('');
+  const [notice, setNotice] = useState('');
   const [filters, setFilters] = useState(DEFAULT_FILTERS);
   const [shares, setShares] = useState<AdminShare[]>([]);
   const [total, setTotal] = useState(0);
+  const [pendingDeleteShare, setPendingDeleteShare] = useState<AdminShare | null>(null);
 
   async function loadShares(nextFilters = filters) {
     setError('');
@@ -94,9 +98,28 @@ export default function AdminShares() {
   async function copyText(value: string, successMessage: string) {
     try {
       await navigator.clipboard.writeText(value);
-      window.alert(successMessage);
+      setNotice(successMessage);
+      setError('');
     } catch {
       setError('复制失败，请手动复制。');
+      setNotice('');
+    }
+  }
+
+  async function handleConfirmDeleteShare() {
+    if (!pendingDeleteShare) {
+      return;
+    }
+
+    const target = pendingDeleteShare;
+    setPendingDeleteShare(null);
+    try {
+      await deleteAdminShare(target.id);
+      setLoading(true);
+      await loadShares();
+    } catch (err) {
+      setLoading(false);
+      setError(err instanceof Error ? err.message : '删除分享失败');
     }
   }
 
@@ -240,14 +263,7 @@ export default function AdminShares() {
             </button>
             <button
               type="button"
-              onClick={async () => {
-                if (!window.confirm(`确认删除分享 ${share.shareName || share.fileName} 吗？`)) {
-                  return;
-                }
-                await deleteAdminShare(share.id);
-                setLoading(true);
-                await loadShares();
-              }}
+              onClick={() => setPendingDeleteShare(share)}
               className="rounded-lg border border-white/10 bg-white/5 p-2.5 text-red-500 transition-all hover:bg-red-500 hover:text-white"
               title="删除分享"
             >
@@ -331,26 +347,26 @@ export default function AdminShares() {
             />
           </label>
           <label className="relative block group">
-            <select
+            <AdminSelect
               value={filters.passwordProtected}
               onChange={(event) => setFilters((current) => ({ ...current, passwordProtected: event.target.value as 'true' | 'false' | '' }))}
-              className="w-full rounded-lg border border-white/10 bg-white/10 px-5 py-4 outline-none transition-all font-black text-[11px] uppercase tracking-widest focus:border-blue-500/50 focus:ring-4 focus:ring-blue-500/10"
+              className="w-full font-black text-[11px] uppercase tracking-widest"
             >
               <option value="">密码保护</option>
               <option value="true">需要密码</option>
               <option value="false">无需密码</option>
-            </select>
+            </AdminSelect>
           </label>
           <label className="relative block group">
-            <select
+            <AdminSelect
               value={filters.expired}
               onChange={(event) => setFilters((current) => ({ ...current, expired: event.target.value as 'true' | 'false' | '' }))}
-              className="w-full rounded-lg border border-white/10 bg-white/10 px-5 py-4 outline-none transition-all font-black text-[11px] uppercase tracking-widest focus:border-blue-500/50 focus:ring-4 focus:ring-blue-500/10"
+              className="w-full font-black text-[11px] uppercase tracking-widest"
             >
               <option value="">过期状态</option>
               <option value="true">已过期</option>
               <option value="false">未过期</option>
-            </select>
+            </AdminSelect>
           </label>
         </div>
 
@@ -394,6 +410,12 @@ export default function AdminShares() {
         </div>
       ) : null}
 
+      {notice ? (
+        <div className="mb-8 rounded-lg border border-blue-500/20 bg-blue-500/10 px-6 py-4 text-xs font-bold uppercase tracking-widest text-blue-600 dark:text-blue-300">
+          {notice}
+        </div>
+      ) : null}
+
       <div className="mb-4 flex flex-wrap items-center justify-between gap-3 text-[9px] font-black uppercase tracking-[0.22em] opacity-30">
         <span>共 {total} 条分享记录</span>
         <span>当前页 {shares.length} 条</span>
@@ -458,6 +480,22 @@ export default function AdminShares() {
           </div>
         )}
       </div>
+
+      <AdminAlertDialog
+        open={pendingDeleteShare !== null}
+        title="删除分享"
+        description={
+          pendingDeleteShare
+            ? `确认删除分享 ${pendingDeleteShare.shareName || pendingDeleteShare.fileName} 吗？删除后该分享将立即失效。`
+            : ''
+        }
+        confirmLabel="确认删除"
+        cancelLabel="取消"
+        confirmTone="danger"
+        busy={loading && pendingDeleteShare !== null}
+        onConfirm={handleConfirmDeleteShare}
+        onCancel={() => setPendingDeleteShare(null)}
+      />
     </motion.div>
   );
 }
diff --git a/front/src/admin/storage-policies-list.tsx b/front/src/admin/storage-policies-list.tsx
index 995b0b1..2d40fed 100644
--- a/front/src/admin/storage-policies-list.tsx
+++ b/front/src/admin/storage-policies-list.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import { ArrowRightLeft, Edit2, Play, Plus, RefreshCw, Square } from 'lucide-react';
-import { motion, AnimatePresence } from 'motion/react';
+import { motion } from 'motion/react';
 import {
   flexRender,
   getCoreRowModel,
@@ -18,6 +18,9 @@ import {
   type StoragePolicyCapabilities,
   type StoragePolicyUpsertPayload,
 } from '@/src/lib/admin-storage-policies';
+import { AdminDialog } from '@/src/components/admin/AdminDialog';
+import { AdminInput } from '@/src/components/admin/AdminInput';
+import { AdminSelect } from '@/src/components/admin/AdminSelect';
 import { formatBytes } from '@/src/lib/format';
 import { cn } from '@/src/lib/utils';
 
@@ -421,217 +424,215 @@ export default function AdminStoragePoliciesList() {
         )}
       </div>
 
-      {showForm ? (
-        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-md px-4 py-8 overflow-y-auto mt-0">
-          <motion.div 
-            initial={{ scale: 0.95, opacity: 0 }}
-            animate={{ scale: 1, opacity: 1 }}
-            className="w-full max-w-2xl glass-panel-no-hover rounded-lg p-12 shadow-2xl border-white/20"
-          >
-            <h2 className="mb-10 text-3xl font-black tracking-tighter uppercase">{editingPolicy ? '编辑策略' : '新建策略'}</h2>
-            
-            <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
-              <div className="space-y-2">
-                <label className="text-[10px] font-black uppercase tracking-[0.2em] opacity-40 ml-1">策略名称</label>
-                <input 
-                  value={form.name} 
-                  onChange={(event) => setForm((current) => ({ ...current, name: event.target.value }))} 
-                  className="w-full rounded-lg glass-panel bg-white/10 p-4 outline-none border-white/10 focus:border-blue-500/50 transition-all font-bold text-sm" 
-                />
-              </div>
-              <div className="space-y-2">
-                <label className="text-[10px] font-black uppercase tracking-[0.2em] opacity-40 ml-1">驱动协议</label>
-                <select 
-                  value={form.type} 
-                  onChange={(event) => setForm((current) => ({ ...current, type: event.target.value as StoragePolicyUpsertPayload['type'] }))} 
-                  className="w-full rounded-lg glass-panel bg-white/10 p-4 outline-none border-white/10 focus:border-blue-500/50 transition-all font-bold text-sm"
-                >
-                  <option value="LOCAL">本地文件系统</option>
-                  <option value="S3_COMPATIBLE">S3 兼容接口</option>
-                </select>
-              </div>
-              <div className="space-y-2 md:col-span-2">
-                <label className="text-[10px] font-black uppercase tracking-[0.2em] opacity-40 ml-1">端点地址</label>
-                <input 
-                  value={form.endpoint || ''} 
-                  onChange={(event) => setForm((current) => ({ ...current, endpoint: event.target.value }))} 
-                  className="w-full rounded-lg glass-panel bg-white/10 p-4 outline-none border-white/10 focus:border-blue-500/50 transition-all font-bold text-sm" 
-                />
-              </div>
-              <div className="space-y-2">
-                <label className="text-[10px] font-black uppercase tracking-[0.2em] opacity-40 ml-1">桶名称</label>
-                <input 
-                  value={form.bucketName || ''} 
-                  onChange={(event) => setForm((current) => ({ ...current, bucketName: event.target.value }))} 
-                  className="w-full rounded-lg glass-panel bg-white/10 p-4 outline-none border-white/10 focus:border-blue-500/50 transition-all font-bold text-sm" 
-                />
-              </div>
-              <div className="space-y-2">
-                <label className="text-[10px] font-black uppercase tracking-[0.2em] opacity-40 ml-1">对象大小上限（字节）</label>
-                <input
-                  type="number"
-                  value={form.maxSizeBytes}
-                  onChange={(event) => setForm((current) => ({ ...current, maxSizeBytes: Number(event.target.value), capabilities: { ...current.capabilities, maxObjectSize: Number(event.target.value) } }))}
-                  className="w-full rounded-lg glass-panel bg-white/10 p-4 outline-none border-white/10 focus:border-blue-500/50 transition-all font-bold text-sm"
-                />
-              </div>
-            </div>
-
-            <div className="mt-10 grid grid-cols-2 gap-4 text-[9px] font-black uppercase tracking-widest md:grid-cols-4">
-              {(
-                [
-                  ['privateBucket', '私有桶'],
-                  ['enabled', '启用'],
-                  ['capabilities.directUpload', '直传'],
-                  ['capabilities.multipartUpload', '分片上传'],
-                  ['capabilities.signedDownloadUrl', '签名下载'],
-                  ['capabilities.serverProxyDownload', '代理下载'],
-                  ['capabilities.requiresCors', '需要 CORS'],
-                  ['capabilities.supportsInternalEndpoint', '内网端点'],
-                ] as const
-              ).map(([key, label]) => {
-                const checked =
-                  key === 'privateBucket'
-                    ? form.privateBucket
-                    : key === 'enabled'
-                      ? form.enabled
-                      : form.capabilities[key.replace('capabilities.', '') as keyof StoragePolicyCapabilities];
-                const checkedBoolean = Boolean(checked);
-                return (
-                  <label key={key} className={cn(
-                    "flex items-center gap-3 p-3 rounded-lg hover:bg-white/10 transition-all cursor-pointer border border-transparent group",
-                    checkedBoolean ? "bg-white/5 border-white/10" : "opacity-30"
-                  )}>
-                    <input
-                      type="checkbox"
-                      checked={checkedBoolean}
-                      onChange={(event) => {
-                        const nextValue = event.target.checked;
-                        if (key === 'privateBucket') {
-                          setForm((current) => ({ ...current, privateBucket: nextValue }));
-                          return;
-                        }
-                        if (key === 'enabled') {
-                          setForm((current) => ({ ...current, enabled: nextValue }));
-                          return;
-                        }
-                        const capabilityKey = key.replace('capabilities.', '') as keyof StoragePolicyCapabilities;
-                        setForm((current) => ({
-                          ...current,
-                          capabilities: {
-                            ...current.capabilities,
-                            [capabilityKey]: nextValue,
-                          },
-                        }));
-                      }}
-                      className="w-4 h-4 rounded-sm border-white/20 bg-white/10 text-blue-600 focus:ring-0"
-                    />
-                    <span className={cn("transition-colors", checked ? "text-blue-500" : "")}>
-                      {label}
-                    </span>
-                  </label>
-                );
-              })}
-            </div>
-
-            <div className="mt-12 flex justify-end gap-3">
-              <button
-                type="button"
-                onClick={() => {
-                  setShowForm(false);
-                  setEditingPolicy(null);
-                }}
-                className="px-8 py-4 rounded-lg glass-panel hover:bg-white/40 text-[11px] font-black uppercase tracking-widest transition-all"
-              >
-                取消
-              </button>
-              <button 
-                type="button" 
-                onClick={() => void savePolicy()} 
-                className="px-10 py-4 rounded-lg bg-blue-600 text-white text-[11px] font-black uppercase tracking-widest shadow-xl hover:bg-blue-500 hover:scale-[1.02] active:scale-[0.98] transition-all"
-              >
-                保存
-              </button>
-            </div>
-          </motion.div>
-        </div>
-      ) : null}
-
-      <AnimatePresence>
-        {migratingPolicy ? (
-          <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-md px-4 py-8 overflow-y-auto mt-0">
-            <motion.div
-              initial={{ scale: 0.96, opacity: 0 }}
-              animate={{ scale: 1, opacity: 1 }}
-              exit={{ scale: 0.96, opacity: 0 }}
-              className="w-full max-w-2xl glass-panel-no-hover rounded-lg p-10 shadow-2xl border-white/20"
+      <AdminDialog
+        open={showForm}
+        title={editingPolicy ? '编辑策略' : '新建策略'}
+        onOpenChange={(nextOpen) => {
+          if (!nextOpen) {
+            setShowForm(false);
+            setEditingPolicy(null);
+          }
+        }}
+        footer={
+          <>
+            <button
+              type="button"
+              onClick={() => {
+                setShowForm(false);
+                setEditingPolicy(null);
+              }}
+              className="px-8 py-4 rounded-lg glass-panel hover:bg-white/40 text-[11px] font-black uppercase tracking-widest transition-all"
             >
-              <h2 className="text-3xl font-black tracking-tighter uppercase">发起迁移</h2>
-              <p className="mt-3 text-[10px] font-black uppercase tracking-[0.2em] opacity-40">仅创建迁移任务，不会立即执行对象复制</p>
+              取消
+            </button>
+            <button
+              type="button"
+              onClick={() => void savePolicy()}
+              className="px-10 py-4 rounded-lg bg-blue-600 text-white text-[11px] font-black uppercase tracking-widest shadow-xl hover:bg-blue-500 hover:scale-[1.02] active:scale-[0.98] transition-all"
+            >
+              保存
+            </button>
+          </>
+        }
+      >
+        <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
+          <div className="space-y-2">
+            <label className="text-[10px] font-black uppercase tracking-[0.2em] opacity-40 ml-1">策略名称</label>
+            <AdminInput
+              value={form.name}
+              onChange={(event) => setForm((current) => ({ ...current, name: event.target.value }))}
+            />
+          </div>
+          <div className="space-y-2">
+            <label className="text-[10px] font-black uppercase tracking-[0.2em] opacity-40 ml-1">驱动协议</label>
+            <AdminSelect
+              value={form.type}
+              onChange={(event) => setForm((current) => ({ ...current, type: event.target.value as StoragePolicyUpsertPayload['type'] }))}
+            >
+              <option value="LOCAL">本地文件系统</option>
+              <option value="S3_COMPATIBLE">S3 兼容接口</option>
+            </AdminSelect>
+          </div>
+          <div className="space-y-2 md:col-span-2">
+            <label className="text-[10px] font-black uppercase tracking-[0.2em] opacity-40 ml-1">端点地址</label>
+            <AdminInput
+              value={form.endpoint || ''}
+              onChange={(event) => setForm((current) => ({ ...current, endpoint: event.target.value }))}
+            />
+          </div>
+          <div className="space-y-2">
+            <label className="text-[10px] font-black uppercase tracking-[0.2em] opacity-40 ml-1">桶名称</label>
+            <AdminInput
+              value={form.bucketName || ''}
+              onChange={(event) => setForm((current) => ({ ...current, bucketName: event.target.value }))}
+            />
+          </div>
+          <div className="space-y-2">
+            <label className="text-[10px] font-black uppercase tracking-[0.2em] opacity-40 ml-1">对象大小上限（字节）</label>
+            <AdminInput
+              type="number"
+              value={form.maxSizeBytes}
+              onChange={(event) =>
+                setForm((current) => ({
+                  ...current,
+                  maxSizeBytes: Number(event.target.value),
+                  capabilities: { ...current.capabilities, maxObjectSize: Number(event.target.value) },
+                }))
+              }
+            />
+          </div>
+        </div>
 
-              <div className="mt-8 grid gap-4 rounded-lg border border-white/10 bg-white/5 p-5">
-                <div>
-                  <div className="text-[10px] font-black uppercase tracking-[0.2em] opacity-40">源策略</div>
-                  <div className="mt-2 text-sm font-black tracking-tight">{migratingPolicy.name}</div>
-                  <div className="mt-1 text-[10px] font-bold opacity-40">PID::{migratingPolicy.id}</div>
-                </div>
-                <div className="h-px bg-white/10" />
-                <div className="grid gap-4 md:grid-cols-2">
-                  <div className="space-y-2">
-                    <label className="text-[10px] font-black uppercase tracking-[0.2em] opacity-40 ml-1">选择已有目标策略</label>
-                    <select
-                      value={migrationTargetPolicyId}
-                      onChange={(event) => setMigrationTargetPolicyId(event.target.value)}
-                      className="w-full rounded-lg glass-panel bg-white/10 p-4 outline-none border-white/10 focus:border-blue-500/50 transition-all font-bold text-sm"
-                    >
-                      <option value="">请选择目标策略</option>
-                      {policies
-                        .filter((item) => item.id !== migratingPolicy.id)
-                        .map((policy) => (
-                          <option key={policy.id} value={policy.id}>
-                            {policy.name} / PID::{policy.id} / {policy.type}
-                          </option>
-                        ))}
-                    </select>
-                  </div>
-                  <div className="space-y-2">
-                    <label className="text-[10px] font-black uppercase tracking-[0.2em] opacity-40 ml-1">或手动输入目标策略 ID</label>
-                    <input
-                      type="number"
-                      min="1"
-                      value={migrationTargetPolicyId}
-                      onChange={(event) => setMigrationTargetPolicyId(event.target.value)}
-                      placeholder="例如 12"
-                      className="w-full rounded-lg glass-panel bg-white/10 p-4 outline-none border-white/10 focus:border-blue-500/50 transition-all font-bold text-sm"
-                    />
-                  </div>
-                </div>
-                <p className="text-[10px] font-bold leading-5 opacity-50">
-                  如果目标策略不在下拉框里，可以直接输入它的策略 ID。当前页面只负责创建迁移任务，不负责迁移进度展示。
-                </p>
-              </div>
+        <div className="mt-10 grid grid-cols-2 gap-4 text-[9px] font-black uppercase tracking-widest md:grid-cols-4">
+          {(
+            [
+              ['privateBucket', '私有桶'],
+              ['enabled', '启用'],
+              ['capabilities.directUpload', '直传'],
+              ['capabilities.multipartUpload', '分片上传'],
+              ['capabilities.signedDownloadUrl', '签名下载'],
+              ['capabilities.serverProxyDownload', '代理下载'],
+              ['capabilities.requiresCors', '需要 CORS'],
+              ['capabilities.supportsInternalEndpoint', '内网端点'],
+            ] as const
+          ).map(([key, label]) => {
+            const checked =
+              key === 'privateBucket'
+                ? form.privateBucket
+                : key === 'enabled'
+                  ? form.enabled
+                  : form.capabilities[key.replace('capabilities.', '') as keyof StoragePolicyCapabilities];
+            const checkedBoolean = Boolean(checked);
+            return (
+              <label
+                key={key}
+                className={cn(
+                  'flex items-center gap-3 p-3 rounded-lg hover:bg-white/10 transition-all cursor-pointer border border-transparent group',
+                  checkedBoolean ? 'bg-white/5 border-white/10' : 'opacity-30'
+                )}
+              >
+                <input
+                  type="checkbox"
+                  checked={checkedBoolean}
+                  onChange={(event) => {
+                    const nextValue = event.target.checked;
+                    if (key === 'privateBucket') {
+                      setForm((current) => ({ ...current, privateBucket: nextValue }));
+                      return;
+                    }
+                    if (key === 'enabled') {
+                      setForm((current) => ({ ...current, enabled: nextValue }));
+                      return;
+                    }
+                    const capabilityKey = key.replace('capabilities.', '') as keyof StoragePolicyCapabilities;
+                    setForm((current) => ({
+                      ...current,
+                      capabilities: {
+                        ...current.capabilities,
+                        [capabilityKey]: nextValue,
+                      },
+                    }));
+                  }}
+                  className="w-4 h-4 rounded-sm border-white/20 bg-white/10 text-blue-600 focus:ring-0"
+                />
+                <span className={cn('transition-colors', checked ? 'text-blue-500' : '')}>{label}</span>
+              </label>
+            );
+          })}
+        </div>
+      </AdminDialog>
 
-              <div className="mt-10 flex justify-end gap-3">
-                <button
-                  type="button"
-                  onClick={closeMigrationDialog}
-                  className="px-8 py-4 rounded-lg glass-panel hover:bg-white/40 text-[11px] font-black uppercase tracking-widest transition-all"
+      <AdminDialog
+        open={Boolean(migratingPolicy)}
+        title="发起迁移"
+        description="仅创建迁移任务，不会立即执行对象复制"
+        onOpenChange={(nextOpen) => {
+          if (!nextOpen) {
+            closeMigrationDialog();
+          }
+        }}
+        footer={
+          <>
+            <button
+              type="button"
+              onClick={closeMigrationDialog}
+              className="px-8 py-4 rounded-lg glass-panel hover:bg-white/40 text-[11px] font-black uppercase tracking-widest transition-all"
+            >
+              取消
+            </button>
+            <button
+              type="button"
+              onClick={() => void submitMigration()}
+              disabled={migrationSubmitting}
+              className="px-10 py-4 rounded-lg bg-blue-600 text-white text-[11px] font-black uppercase tracking-widest shadow-xl hover:bg-blue-500 hover:scale-[1.02] active:scale-[0.98] disabled:cursor-not-allowed disabled:opacity-60 transition-all"
+            >
+              {migrationSubmitting ? '创建中...' : '创建迁移任务'}
+            </button>
+          </>
+        }
+      >
+        {migratingPolicy ? (
+          <div className="grid gap-4 rounded-lg border border-white/10 bg-white/5 p-5">
+            <div>
+              <div className="text-[10px] font-black uppercase tracking-[0.2em] opacity-40">源策略</div>
+              <div className="mt-2 text-sm font-black tracking-tight">{migratingPolicy.name}</div>
+              <div className="mt-1 text-[10px] font-bold opacity-40">PID::{migratingPolicy.id}</div>
+            </div>
+            <div className="h-px bg-white/10" />
+            <div className="grid gap-4 md:grid-cols-2">
+              <div className="space-y-2">
+                <label className="text-[10px] font-black uppercase tracking-[0.2em] opacity-40 ml-1">选择已有目标策略</label>
+                <AdminSelect
+                  value={migrationTargetPolicyId}
+                  onChange={(event) => setMigrationTargetPolicyId(event.target.value)}
                 >
-                  取消
-                </button>
-                <button
-                  type="button"
-                  onClick={() => void submitMigration()}
-                  disabled={migrationSubmitting}
-                  className="px-10 py-4 rounded-lg bg-blue-600 text-white text-[11px] font-black uppercase tracking-widest shadow-xl hover:bg-blue-500 hover:scale-[1.02] active:scale-[0.98] disabled:cursor-not-allowed disabled:opacity-60 transition-all"
-                >
-                  {migrationSubmitting ? '创建中...' : '创建迁移任务'}
-                </button>
+                  <option value="">请选择目标策略</option>
+                  {policies
+                    .filter((item) => item.id !== migratingPolicy.id)
+                    .map((policy) => (
+                      <option key={policy.id} value={policy.id}>
+                        {policy.name} / PID::{policy.id} / {policy.type}
+                      </option>
+                    ))}
+                </AdminSelect>
               </div>
-            </motion.div>
+              <div className="space-y-2">
+                <label className="text-[10px] font-black uppercase tracking-[0.2em] opacity-40 ml-1">或手动输入目标策略 ID</label>
+                <AdminInput
+                  type="number"
+                  min="1"
+                  value={migrationTargetPolicyId}
+                  onChange={(event) => setMigrationTargetPolicyId(event.target.value)}
+                  placeholder="例如 12"
+                />
+              </div>
+            </div>
+            <p className="text-[10px] font-bold leading-5 opacity-50">
+              如果目标策略不在下拉框里，可以直接输入它的策略 ID。当前页面只负责创建迁移任务，不负责迁移进度展示。
+            </p>
           </div>
         ) : null}
-      </AnimatePresence>
+      </AdminDialog>
     </motion.div>
   );
 }
diff --git a/front/src/admin/tasks.tsx b/front/src/admin/tasks.tsx
index ecb37d2..b7d04c4 100644
--- a/front/src/admin/tasks.tsx
+++ b/front/src/admin/tasks.tsx
@@ -12,6 +12,7 @@ import {
   User,
 } from 'lucide-react';
 import { motion } from 'motion/react';
+import { AdminSelect } from '@/src/components/admin/AdminSelect';
 import { cn } from '@/src/lib/utils';
 import { formatDateTime } from '@/src/lib/format';
 import { getAdminTask, getAdminTasks, type AdminTask, type AdminTaskQuery } from '@/src/lib/admin-tasks';
@@ -345,21 +346,21 @@ export default function AdminTasks() {
         <div className="flex flex-wrap items-center gap-3">
           <label className="rounded-lg glass-panel px-4 py-3 text-[11px] font-black uppercase tracking-widest">
             <span className="mr-3 opacity-40">每页</span>
-            <select
+            <AdminSelect
               value={pageSize}
               onChange={(event) => {
                 const nextSize = Number(event.target.value);
                 setPageSize(nextSize);
                 void loadTasks(0, filters, nextSize);
               }}
-              className="bg-transparent outline-none"
+              className="w-auto min-w-[5rem] bg-transparent border-0 rounded-none p-0 pr-8 shadow-none focus:ring-0 focus:border-transparent font-black text-[11px] uppercase tracking-widest"
             >
               {PAGE_SIZE_OPTIONS.map((option) => (
                 <option key={option} value={option}>
                   {option}
                 </option>
               ))}
-            </select>
+            </AdminSelect>
           </label>
           <button
             type="button"
diff --git a/front/src/admin/users-list.tsx b/front/src/admin/users-list.tsx
index 7d7dd8a..a897d6c 100644
--- a/front/src/admin/users-list.tsx
+++ b/front/src/admin/users-list.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useMemo, useState } from 'react';
 import { Ban, Check, Clipboard, KeyRound, PencilLine, RefreshCw, Search, Shield, Mail, Phone, X } from 'lucide-react';
 import { motion } from 'motion/react';
-import { useForm } from 'react-hook-form';
+import { Controller, useForm } from 'react-hook-form';
 import {
   createColumnHelper,
   flexRender,
@@ -9,6 +9,8 @@ import {
   useReactTable,
   type ColumnDef,
 } from '@tanstack/react-table';
+import { AdminSelect } from '@/src/components/admin/AdminSelect';
+import { AdminInput } from '@/src/components/admin/AdminInput';
 import { cn } from '@/src/lib/utils';
 import {
   getAdminUsers,
@@ -20,6 +22,7 @@ import {
   updateUserStorageQuota,
   type AdminUser,
 } from '@/src/lib/admin-users';
+import { AdminDialog } from '@/src/components/admin/AdminDialog';
 import { formatBytes, formatDateTime } from '@/src/lib/format';
 
 const container = {
@@ -85,6 +88,7 @@ export default function AdminUsersList() {
   const [temporaryPasswords, setTemporaryPasswords] = useState<Record<number, string>>({});
   const [copiedTemporaryPasswordUserId, setCopiedTemporaryPasswordUserId] = useState<number | null>(null);
   const {
+    control,
     register,
     trigger,
     getValues,
@@ -456,274 +460,260 @@ export default function AdminUsersList() {
 
       {error ? <div className="mb-8 rounded-lg bg-red-500/10 border border-red-500/20 px-6 py-4 text-xs text-red-600 font-bold backdrop-blur-md uppercase tracking-widest">{error}</div> : null}
 
-      <div className="grid flex-1 min-h-0 gap-6 xl:grid-cols-[minmax(0,1fr)_360px]">
+      <div className="flex-1 min-h-0">
         {loading && users.length === 0 ? (
           <div className="glass-panel-no-hover rounded-lg px-4 py-16 text-center text-[10px] font-black uppercase tracking-widest opacity-40">正在查询用户数据...</div>
         ) : (
-          <>
-            <div className="glass-panel-no-hover rounded-lg overflow-hidden shadow-3xl border border-white/10">
-              <div className="overflow-x-auto">
-                <table className="min-w-full divide-y divide-white/10">
-                  <thead className="bg-white/10 dark:bg-black/40">
-                    {table.getHeaderGroups().map((headerGroup) => (
-                      <tr key={headerGroup.id}>
-                        {headerGroup.headers.map((header) => (
-                          <th
-                            key={header.id}
-                            className={cn(
-                              "px-8 py-5 text-[9px] font-black uppercase tracking-[0.2em] opacity-40",
-                              header.column.id === 'actions' ? 'text-right' : 'text-left'
-                            )}
-                          >
-                            {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
-                          </th>
-                        ))}
-                      </tr>
-                    ))}
-                  </thead>
-                  <motion.tbody 
-                    variants={container}
-                    initial="hidden"
-                    animate="show"
-                    className="divide-y divide-white/10 dark:divide-white/5"
-                  >
-                    {table.getRowModel().rows.map((row) => {
-                      const user = row.original;
-                      const isEditing = editingUser?.id === user.id;
-                      return (
-                        <motion.tr
-                          key={row.id}
-                          variants={itemVariants}
+          <div className="glass-panel-no-hover rounded-lg overflow-hidden shadow-3xl border border-white/10">
+            <div className="overflow-x-auto">
+              <table className="min-w-full divide-y divide-white/10">
+                <thead className="bg-white/10 dark:bg-black/40">
+                  {table.getHeaderGroups().map((headerGroup) => (
+                    <tr key={headerGroup.id}>
+                      {headerGroup.headers.map((header) => (
+                        <th
+                          key={header.id}
                           className={cn(
-                            "group transition-colors",
-                            isEditing ? "bg-blue-500/10 dark:bg-blue-500/5" : "hover:bg-white/10 dark:hover:bg-white/5"
+                            'px-8 py-5 text-[9px] font-black uppercase tracking-[0.2em] opacity-40',
+                            header.column.id === 'actions' ? 'text-right' : 'text-left',
                           )}
                         >
-                          {row.getVisibleCells().map((cell) => (
-                            <td
-                              key={cell.id}
-                              className={cn(
-                                "px-8 py-5 align-top",
-                                cell.column.id === 'actions' ? 'text-right' : 'text-left'
-                              )}
-                            >
-                              {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                            </td>
-                          ))}
-                        </motion.tr>
-                      );
-                    })}
-                    {table.getRowModel().rows.length === 0 ? (
-                      <tr>
-                        <td colSpan={6} className="px-8 py-20 text-center text-[10px] font-black uppercase tracking-widest opacity-30">
-                          暂无用户记录
-                        </td>
-                      </tr>
-                    ) : null}
-                  </motion.tbody>
-                </table>
+                          {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
+                        </th>
+                      ))}
+                    </tr>
+                  ))}
+                </thead>
+                <motion.tbody
+                  variants={container}
+                  initial="hidden"
+                  animate="show"
+                  className="divide-y divide-white/10 dark:divide-white/5"
+                >
+                  {table.getRowModel().rows.map((row) => {
+                    const user = row.original;
+                    const isEditing = editingUser?.id === user.id;
+                    return (
+                      <motion.tr
+                        key={row.id}
+                        variants={itemVariants}
+                        className={cn(
+                          'group transition-colors',
+                          isEditing ? 'bg-blue-500/10 dark:bg-blue-500/5' : 'hover:bg-white/10 dark:hover:bg-white/5',
+                        )}
+                      >
+                        {row.getVisibleCells().map((cell) => (
+                          <td
+                            key={cell.id}
+                            className={cn(
+                              'px-8 py-5 align-top',
+                              cell.column.id === 'actions' ? 'text-right' : 'text-left',
+                            )}
+                          >
+                            {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                          </td>
+                        ))}
+                      </motion.tr>
+                    );
+                  })}
+                  {table.getRowModel().rows.length === 0 ? (
+                    <tr>
+                      <td colSpan={6} className="px-8 py-20 text-center text-[10px] font-black uppercase tracking-widest opacity-30">
+                        暂无用户记录
+                      </td>
+                    </tr>
+                  ) : null}
+                </motion.tbody>
+              </table>
+            </div>
+          </div>
+        )}
+      </div>
+
+      <AdminDialog
+        open={Boolean(editingUser)}
+        layout="side-panel"
+        title="用户策略编辑"
+        description={
+          editingUser
+            ? '这里负责角色、存储配额、最大上传限制和手动改密。临时密码生成仍保留在表格快捷操作里，避免和手动改密混在一起。'
+            : '从左侧表格点击“编辑”按钮，右侧会自动展开该用户的策略面板。'
+        }
+        onOpenChange={(nextOpen) => {
+          if (!nextOpen) {
+            closeEditor();
+          }
+        }}
+      >
+        {editingUser ? (
+          <div className="space-y-6">
+            <div className="rounded-lg border border-white/10 bg-white/5 px-4 py-4">
+              <div className="flex items-center justify-between gap-3">
+                <div>
+                  <div className="text-[9px] font-black uppercase tracking-[0.2em] opacity-30">当前账号</div>
+                  <div className="mt-2 text-[12px] font-black uppercase tracking-tight">{editingUser.email}</div>
+                </div>
+                <span
+                  className={cn(
+                    'inline-flex items-center gap-2 rounded-sm px-2 py-0.5 text-[9px] font-black uppercase tracking-widest border',
+                    editingUser.banned
+                      ? 'bg-red-500/10 text-red-500 border-red-500/20'
+                      : 'bg-green-500/10 text-green-500 border-green-500/20',
+                  )}
+                >
+                  {editingUser.banned ? '已禁用' : '正常'}
+                </span>
+              </div>
+              <div className="mt-4 text-[10px] font-black uppercase tracking-tight">
+                {formatBytes(editingUser.usedStorageBytes)} / <span className="opacity-30">{formatBytes(editingUser.storageQuotaBytes)}</span>
+              </div>
+              <div className="mt-2 h-1 w-full rounded-full bg-white/10 overflow-hidden">
+                <div
+                  className="h-full bg-blue-500 shadow-[0_0_8px_rgba(59,130,246,0.5)]"
+                  style={{ width: `${Math.min(100, (editingUser.usedStorageBytes / editingUser.storageQuotaBytes) * 100)}%` }}
+                />
               </div>
             </div>
 
-            <aside className="glass-panel-no-hover rounded-lg border border-white/10 p-6 shadow-3xl xl:sticky xl:top-6 xl:self-start">
+            <div className="space-y-4">
               <div className="flex items-start justify-between gap-3">
                 <div>
-                  <div className="text-[9px] font-black uppercase tracking-[0.2em] opacity-30">用户策略编辑</div>
-                  <h2 className="mt-2 text-lg font-black tracking-tight uppercase">
-                    {editingUser ? editingUser.username : '请选择用户'}
-                  </h2>
-                  <p className="mt-2 text-[10px] font-bold opacity-40 leading-relaxed">
-                    {editingUser
-                      ? '这里负责角色、存储配额、最大上传限制和手动改密。临时密码生成仍保留在表格快捷操作里，避免和手动改密混在一起。'
-                      : '从左侧表格点击“编辑”打开该用户的策略面板。'}
-                  </p>
+                  <div className="text-[9px] font-black uppercase tracking-[0.2em] opacity-30">基础配置</div>
+                  <div className="mt-1 text-[11px] font-bold opacity-50">修改角色、存储配额和最大上传限制后，点击保存即可生效。</div>
                 </div>
-                {editingUser ? (
-                  <button
-                    type="button"
-                    onClick={closeEditor}
-                    className="rounded-full border border-white/10 px-3 py-1.5 text-[10px] font-black uppercase tracking-widest opacity-50 transition-colors hover:bg-white/10 hover:opacity-100"
-                  >
-                    关闭
-                  </button>
-                ) : null}
+                <span className="inline-flex items-center gap-2 rounded-sm px-2 py-0.5 text-[9px] font-black uppercase tracking-widest border bg-blue-500/10 text-blue-500 border-blue-500/20">
+                  <Shield className="h-3 w-3" />
+                  {watchedRole}
+                </span>
               </div>
 
-              {editingUser ? (
-                <div className="mt-6 space-y-6">
-                  <div className="rounded-lg border border-white/10 bg-white/5 px-4 py-4">
-                    <div className="flex items-center justify-between gap-3">
-                      <div>
-                        <div className="text-[9px] font-black uppercase tracking-[0.2em] opacity-30">当前账号</div>
-                        <div className="mt-2 text-[12px] font-black uppercase tracking-tight">{editingUser.email}</div>
-                      </div>
-                      <span
-                        className={cn(
-                          "inline-flex items-center gap-2 rounded-sm px-2 py-0.5 text-[9px] font-black uppercase tracking-widest border",
-                          editingUser.banned
-                            ? "bg-red-500/10 text-red-500 border-red-500/20"
-                            : "bg-green-500/10 text-green-500 border-green-500/20"
-                        )}
-                      >
-                        {editingUser.banned ? '已禁用' : '正常'}
-                      </span>
-                    </div>
-                    <div className="mt-4 text-[10px] font-black uppercase tracking-tight">
-                      {formatBytes(editingUser.usedStorageBytes)} / <span className="opacity-30">{formatBytes(editingUser.storageQuotaBytes)}</span>
-                    </div>
-                    <div className="mt-2 h-1 w-full rounded-full bg-white/10 overflow-hidden">
-                      <div
-                        className="h-full bg-blue-500 shadow-[0_0_8px_rgba(59,130,246,0.5)]"
-                        style={{ width: `${Math.min(100, (editingUser.usedStorageBytes / editingUser.storageQuotaBytes) * 100)}%` }}
-                      />
-                    </div>
-                  </div>
-
-                  <div className="space-y-4">
-                    <div className="flex items-start justify-between gap-3">
-                      <div>
-                        <div className="text-[9px] font-black uppercase tracking-[0.2em] opacity-30">基础配置</div>
-                        <div className="mt-1 text-[11px] font-bold opacity-50">修改角色、存储配额和最大上传限制后，点击保存即可生效。</div>
-                      </div>
-                      <span className="inline-flex items-center gap-2 rounded-sm px-2 py-0.5 text-[9px] font-black uppercase tracking-widest border bg-blue-500/10 text-blue-500 border-blue-500/20">
-                        <Shield className="h-3 w-3" />
-                        {watchedRole}
-                      </span>
-                    </div>
-
-                    <label className="block">
-                      <span className="mb-2 block text-[9px] font-black uppercase tracking-[0.2em] opacity-30">角色</span>
-                      <select
-                        {...register('role', {
-                          validate: (value) => (value === 'USER' || value === 'ADMIN' ? true : '请选择有效角色'),
-                        })}
-                        className="w-full rounded-lg border border-white/10 bg-white/10 px-4 py-3 text-[11px] font-black uppercase tracking-widest outline-none transition-colors focus:border-blue-500/50 focus:ring-4 focus:ring-blue-500/10"
-                      >
-                        <option value="USER">USER - 普通用户</option>
-                        <option value="ADMIN">ADMIN - 管理员</option>
-                      </select>
-                      {errors.role ? (
-                        <p className="mt-2 text-[10px] font-bold uppercase tracking-widest text-red-500">
-                          {errors.role.message}
-                        </p>
-                      ) : null}
-                    </label>
-
-                    <div className="grid gap-4 sm:grid-cols-2">
-                      <label className="block">
-                        <span className="mb-2 block text-[9px] font-black uppercase tracking-[0.2em] opacity-30">存储配额（字节）</span>
-                        <input
-                          {...register('storageQuotaBytes', {
-                            validate: (value) => validateNonNegativeBytes(value, '存储配额'),
-                          })}
-                          inputMode="numeric"
-                          className="w-full rounded-lg border border-white/10 bg-white/10 px-4 py-3 text-[11px] font-black tracking-widest outline-none transition-colors focus:border-blue-500/50 focus:ring-4 focus:ring-blue-500/10"
-                        />
-                        {errors.storageQuotaBytes ? (
-                          <p className="mt-2 text-[10px] font-bold uppercase tracking-widest text-red-500">
-                            {errors.storageQuotaBytes.message}
-                          </p>
-                        ) : null}
-                      </label>
-                      <label className="block">
-                        <span className="mb-2 block text-[9px] font-black uppercase tracking-[0.2em] opacity-30">最大上传限制（字节）</span>
-                        <input
-                          {...register('maxUploadSizeBytes', {
-                            validate: (value) => validateNonNegativeBytes(value, '最大上传限制'),
-                          })}
-                          inputMode="numeric"
-                          className="w-full rounded-lg border border-white/10 bg-white/10 px-4 py-3 text-[11px] font-black tracking-widest outline-none transition-colors focus:border-blue-500/50 focus:ring-4 focus:ring-blue-500/10"
-                        />
-                        {errors.maxUploadSizeBytes ? (
-                          <p className="mt-2 text-[10px] font-bold uppercase tracking-widest text-red-500">
-                            {errors.maxUploadSizeBytes.message}
-                          </p>
-                        ) : null}
-                      </label>
-                    </div>
-
-                    <button
-                      type="button"
-                      onClick={() => void saveEditorProfile()}
-                      className="inline-flex w-full items-center justify-center gap-3 rounded-lg bg-blue-600 px-4 py-3 text-[10px] font-black uppercase tracking-[0.2em] text-white transition-colors hover:bg-blue-500"
+              <label className="block">
+                <span className="mb-2 block text-[9px] font-black uppercase tracking-[0.2em] opacity-30">角色</span>
+                <Controller
+                  control={control}
+                  name="role"
+                  rules={{
+                    validate: (value) => (value === 'USER' || value === 'ADMIN' ? true : '请选择有效角色'),
+                  }}
+                  render={({ field }) => (
+                    <AdminSelect
+                      value={field.value}
+                      onChange={(event) => field.onChange(event.target.value)}
+                      className="w-full text-[11px] font-black uppercase tracking-widest"
                     >
-                      <Check className="h-4 w-4" />
-                      保存基础配置
-                    </button>
-                  </div>
+                      <option value="USER">USER - 普通用户</option>
+                      <option value="ADMIN">ADMIN - 管理员</option>
+                    </AdminSelect>
+                  )}
+                />
+                {errors.role ? (
+                  <p className="mt-2 text-[10px] font-bold uppercase tracking-widest text-red-500">{errors.role.message}</p>
+                ) : null}
+              </label>
 
-                  <div className="space-y-4 rounded-lg border border-amber-500/20 bg-amber-500/10 px-4 py-4">
-                    <div className="flex items-start justify-between gap-3">
-                      <div>
-                        <div className="text-[9px] font-black uppercase tracking-[0.2em] text-amber-500">手动设置密码</div>
-                        <div className="mt-1 text-[10px] font-bold opacity-60 leading-relaxed">
-                          这里是人工指定一个新密码，会直接覆盖当前密码。它和“生成临时密码”是两条不同的管理路径。
-                        </div>
-                      </div>
-                      <KeyRound className="h-4 w-4 text-amber-500" />
-                    </div>
-                    <label className="block">
-                      <span className="mb-2 block text-[9px] font-black uppercase tracking-[0.2em] opacity-30">新密码</span>
-                      <input
-                        {...register('manualPassword', {
-                          validate: (value) => (value.trim() ? true : '请输入要手动设置的新密码'),
-                        })}
-                        type="password"
-                        autoComplete="new-password"
-                        className="w-full rounded-lg border border-white/10 bg-black/20 px-4 py-3 text-[11px] font-black tracking-widest outline-none transition-colors focus:border-amber-500/50 focus:ring-4 focus:ring-amber-500/10"
-                        placeholder="输入后点击“手动设置密码”"
-                      />
-                      {errors.manualPassword ? (
-                        <p className="mt-2 text-[10px] font-bold uppercase tracking-widest text-amber-500">
-                          {errors.manualPassword.message}
-                        </p>
-                      ) : null}
-                    </label>
-                    <button
-                      type="button"
-                      onClick={() => void submitManualPassword()}
-                      className="inline-flex w-full items-center justify-center gap-3 rounded-lg border border-amber-500/20 bg-amber-500/15 px-4 py-3 text-[10px] font-black uppercase tracking-[0.2em] text-amber-500 transition-colors hover:bg-amber-500 hover:text-white"
-                    >
-                      <KeyRound className="h-4 w-4" />
-                      手动设置密码
-                    </button>
-                    <p className="text-[10px] font-bold opacity-50 leading-relaxed">
-                      适合人工恢复账号、统一初始化密码或和用户同步已知密码。若要发放一次性密码，请继续使用表格里的“生成临时密码”。
+              <div className="grid gap-4 sm:grid-cols-2">
+                <label className="block">
+                  <span className="mb-2 block text-[9px] font-black uppercase tracking-[0.2em] opacity-30">存储配额（字节）</span>
+                  <AdminInput
+                    {...register('storageQuotaBytes', {
+                      validate: (value) => validateNonNegativeBytes(value, '存储配额'),
+                    })}
+                    inputMode="numeric"
+                  />
+                  {errors.storageQuotaBytes ? (
+                    <p className="mt-2 text-[10px] font-bold uppercase tracking-widest text-red-500">
+                      {errors.storageQuotaBytes.message}
                     </p>
-                  </div>
+                  ) : null}
+                </label>
+                <label className="block">
+                  <span className="mb-2 block text-[9px] font-black uppercase tracking-[0.2em] opacity-30">最大上传限制（字节）</span>
+                  <AdminInput
+                    {...register('maxUploadSizeBytes', {
+                      validate: (value) => validateNonNegativeBytes(value, '最大上传限制'),
+                    })}
+                    inputMode="numeric"
+                  />
+                  {errors.maxUploadSizeBytes ? (
+                    <p className="mt-2 text-[10px] font-bold uppercase tracking-widest text-red-500">
+                      {errors.maxUploadSizeBytes.message}
+                    </p>
+                  ) : null}
+                </label>
+              </div>
 
-                  <div className="rounded-lg border border-white/10 bg-white/5 px-4 py-4">
-                    <div className="text-[9px] font-black uppercase tracking-[0.2em] opacity-30">账号状态</div>
-                    <div className="mt-2 text-[10px] font-bold opacity-50 leading-relaxed">
-                      可直接切换禁用 / 恢复，不影响上面的基础配置或手动改密表单。
-                    </div>
-                    <button
-                      type="button"
-                      onClick={() => void mutate(() => updateUserStatus(editingUser.id, !editingUser.banned))}
-                      className={cn(
-                        "mt-4 inline-flex w-full items-center justify-center gap-3 rounded-lg border px-4 py-3 text-[10px] font-black uppercase tracking-[0.2em] transition-colors",
-                        editingUser.banned
-                          ? "border-green-500/20 bg-green-500/10 text-green-500 hover:bg-green-500 hover:text-white"
-                          : "border-red-500/20 bg-red-500/10 text-red-500 hover:bg-red-500 hover:text-white"
-                      )}
-                    >
-                      <Ban className="h-4 w-4" />
-                      {editingUser.banned ? '恢复账号' : '禁用账号'}
-                    </button>
+              <button
+                type="button"
+                onClick={() => void saveEditorProfile()}
+                className="inline-flex w-full items-center justify-center gap-3 rounded-lg bg-blue-600 px-4 py-3 text-[10px] font-black uppercase tracking-[0.2em] text-white transition-colors hover:bg-blue-500"
+              >
+                <Check className="h-4 w-4" />
+                保存基础配置
+              </button>
+            </div>
+
+            <div className="space-y-4 rounded-lg border border-amber-500/20 bg-amber-500/10 px-4 py-4">
+              <div className="flex items-start justify-between gap-3">
+                <div>
+                  <div className="text-[9px] font-black uppercase tracking-[0.2em] text-amber-500">手动设置密码</div>
+                  <div className="mt-1 text-[10px] font-bold opacity-60 leading-relaxed">
+                    这里是人工指定一个新密码，会直接覆盖当前密码。它和“生成临时密码”是两条不同的管理路径。
                   </div>
                 </div>
-              ) : (
-                <div className="mt-10 rounded-lg border border-dashed border-white/10 px-6 py-12 text-center">
-                  <div className="text-[10px] font-black uppercase tracking-[0.2em] opacity-25">编辑面板为空</div>
-                  <p className="mt-3 text-[11px] font-bold opacity-40 leading-relaxed">
-                    点击左侧任意用户行的“编辑”按钮，右侧会自动展开该用户的角色、配额和密码管理表单。
+                <KeyRound className="h-4 w-4 text-amber-500" />
+              </div>
+              <label className="block">
+                <span className="mb-2 block text-[9px] font-black uppercase tracking-[0.2em] opacity-30">新密码</span>
+                <AdminInput
+                  {...register('manualPassword', {
+                    validate: (value) => (value.trim() ? true : '请输入要手动设置的新密码'),
+                  })}
+                  type="password"
+                  autoComplete="new-password"
+                  className="bg-black/20 focus:border-amber-500/50 focus:ring-amber-500/10"
+                  placeholder="输入后点击“手动设置密码”"
+                />
+                {errors.manualPassword ? (
+                  <p className="mt-2 text-[10px] font-bold uppercase tracking-widest text-amber-500">
+                    {errors.manualPassword.message}
                   </p>
-                </div>
-              )}
-            </aside>
-          </>
-        )}
-      </div>
+                ) : null}
+              </label>
+              <button
+                type="button"
+                onClick={() => void submitManualPassword()}
+                className="inline-flex w-full items-center justify-center gap-3 rounded-lg border border-amber-500/20 bg-amber-500/15 px-4 py-3 text-[10px] font-black uppercase tracking-[0.2em] text-amber-500 transition-colors hover:bg-amber-500 hover:text-white"
+              >
+                <KeyRound className="h-4 w-4" />
+                手动设置密码
+              </button>
+              <p className="text-[10px] font-bold opacity-50 leading-relaxed">
+                适合人工恢复账号、统一初始化密码或和用户同步已知密码。若要发放一次性密码，请继续使用表格里的“生成临时密码”。
+              </p>
+            </div>
+
+            <div className="rounded-lg border border-white/10 bg-white/5 px-4 py-4">
+              <div className="text-[9px] font-black uppercase tracking-[0.2em] opacity-30">账号状态</div>
+              <div className="mt-2 text-[10px] font-bold opacity-50 leading-relaxed">
+                可直接切换禁用 / 恢复，不影响上面的基础配置或手动改密表单。
+              </div>
+              <button
+                type="button"
+                onClick={() => void mutate(() => updateUserStatus(editingUser.id, !editingUser.banned))}
+                className={cn(
+                  'mt-4 inline-flex w-full items-center justify-center gap-3 rounded-lg border px-4 py-3 text-[10px] font-black uppercase tracking-[0.2em] transition-colors',
+                  editingUser.banned
+                    ? 'border-green-500/20 bg-green-500/10 text-green-500 hover:bg-green-500 hover:text-white'
+                    : 'border-red-500/20 bg-red-500/10 text-red-500 hover:bg-red-500 hover:text-white',
+                )}
+              >
+                <Ban className="h-4 w-4" />
+                {editingUser.banned ? '恢复账号' : '禁用账号'}
+              </button>
+            </div>
+          </div>
+        ) : null}
+      </AdminDialog>
     </motion.div>
   );
 }
diff --git a/front/src/components/admin/AdminAlertDialog.tsx b/front/src/components/admin/AdminAlertDialog.tsx
new file mode 100644
index 0000000..0a1489c
--- /dev/null
+++ b/front/src/components/admin/AdminAlertDialog.tsx
@@ -0,0 +1,93 @@
+import * as AlertDialog from '@radix-ui/react-alert-dialog';
+import { AlertTriangle } from 'lucide-react';
+import { cn } from '@/src/lib/utils';
+
+type AdminAlertDialogProps = {
+  open: boolean;
+  title: string;
+  description: string;
+  confirmLabel?: string;
+  cancelLabel?: string;
+  confirmTone?: 'danger' | 'warning';
+  busy?: boolean;
+  onConfirm: () => void | Promise<void>;
+  onCancel: () => void;
+};
+
+export function AdminAlertDialog({
+  open,
+  title,
+  description,
+  confirmLabel = '确认',
+  cancelLabel = '取消',
+  confirmTone = 'danger',
+  busy = false,
+  onConfirm,
+  onCancel,
+}: AdminAlertDialogProps) {
+  const toneClasses =
+    confirmTone === 'warning'
+      ? 'border-amber-500/20 bg-amber-500/10 text-amber-400'
+      : 'border-red-500/20 bg-red-500/10 text-red-400';
+
+  return (
+    <AlertDialog.Root
+      open={open}
+      onOpenChange={(nextOpen) => {
+        if (!nextOpen && !busy) {
+          onCancel();
+        }
+      }}
+    >
+      <AlertDialog.Portal>
+        <AlertDialog.Overlay className="fixed inset-0 z-[100] bg-black/60 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out" />
+        <AlertDialog.Content
+          onEscapeKeyDown={(event) => {
+            if (busy) {
+              event.preventDefault();
+            }
+          }}
+          className="fixed inset-0 z-[101] flex items-center justify-center px-4 py-6"
+        >
+          <div className="relative w-full max-w-lg rounded-3xl border border-white/10 bg-gray-950/95 p-6 text-gray-100 shadow-[0_30px_120px_rgba(0,0,0,0.55)]">
+            <div className={cn('mb-4 flex h-12 w-12 items-center justify-center rounded-2xl border', toneClasses)}>
+              <AlertTriangle className="h-5 w-5" />
+            </div>
+
+            <AlertDialog.Title className="text-xl font-black tracking-tight">{title}</AlertDialog.Title>
+            <AlertDialog.Description className="mt-3 text-sm leading-6 text-gray-300">
+              {description}
+            </AlertDialog.Description>
+
+            <div className="mt-8 flex flex-wrap justify-end gap-3">
+              <AlertDialog.Cancel asChild>
+                <button
+                  type="button"
+                  disabled={busy}
+                  className="rounded-xl border border-white/10 bg-white/5 px-5 py-3 text-[11px] font-black uppercase tracking-[0.18em] text-gray-100 transition-all hover:bg-white/10 disabled:cursor-not-allowed disabled:opacity-50"
+                >
+                  {cancelLabel}
+                </button>
+              </AlertDialog.Cancel>
+              <AlertDialog.Action asChild>
+                <button
+                  type="button"
+                  onClick={() => {
+                    void onConfirm();
+                  }}
+                  disabled={busy}
+                  className={cn(
+                    'rounded-xl px-5 py-3 text-[11px] font-black uppercase tracking-[0.18em] text-white transition-all hover:scale-[1.01] disabled:cursor-not-allowed disabled:opacity-50',
+                    confirmTone === 'warning' ? 'bg-amber-500 hover:bg-amber-400' : 'bg-red-600 hover:bg-red-500',
+                  )}
+                >
+                  {busy ? '处理中' : confirmLabel}
+                </button>
+              </AlertDialog.Action>
+            </div>
+          </div>
+        </AlertDialog.Content>
+      </AlertDialog.Portal>
+    </AlertDialog.Root>
+  );
+}
diff --git a/front/src/components/admin/AdminDialog.tsx b/front/src/components/admin/AdminDialog.tsx
new file mode 100644
index 0000000..5b5bacd
--- /dev/null
+++ b/front/src/components/admin/AdminDialog.tsx
@@ -0,0 +1,187 @@
+import * as Dialog from '@radix-ui/react-dialog';
+import { X } from 'lucide-react';
+import type { ReactNode } from 'react';
+import { cn } from '@/src/lib/utils';
+
+export const AdminDialogRoot = Dialog.Root;
+export const AdminDialogTrigger = Dialog.Trigger;
+export const AdminDialogPortal = Dialog.Portal;
+export const AdminDialogOverlay = Dialog.Overlay;
+export const AdminDialogContent = Dialog.Content;
+export const AdminDialogTitle = Dialog.Title;
+export const AdminDialogDescription = Dialog.Description;
+export const AdminDialogClose = Dialog.Close;
+
+type AdminDialogLayout = 'center' | 'side-panel';
+type AdminDialogAccent = 'default' | 'warning' | 'danger' | 'success';
+
+type AdminDialogProps = {
+  open: boolean;
+  title: ReactNode;
+  description?: ReactNode;
+  icon?: ReactNode;
+  layout?: AdminDialogLayout;
+  mode?: AdminDialogLayout;
+  size?: string;
+  accent?: AdminDialogAccent;
+  dismissible?: boolean;
+  showCloseButton?: boolean;
+  footer?: ReactNode;
+  children: ReactNode;
+  onOpenChange: (open: boolean) => void;
+  className?: string;
+  overlayClassName?: string;
+  panelClassName?: string;
+  headerClassName?: string;
+  bodyClassName?: string;
+  footerClassName?: string;
+  titleClassName?: string;
+  descriptionClassName?: string;
+  closeLabel?: string;
+};
+
+const accentClasses: Record<AdminDialogAccent, string> = {
+  default: 'border-blue-500/20 bg-blue-500/10 text-blue-400',
+  warning: 'border-amber-500/20 bg-amber-500/10 text-amber-400',
+  danger: 'border-red-500/20 bg-red-500/10 text-red-400',
+  success: 'border-green-500/20 bg-green-500/10 text-green-400',
+};
+
+export function AdminDialog({
+  open,
+  title,
+  description,
+  icon,
+  layout,
+  mode,
+  size,
+  accent = 'default',
+  dismissible = true,
+  showCloseButton = true,
+  footer,
+  children,
+  onOpenChange,
+  className,
+  overlayClassName,
+  panelClassName,
+  headerClassName,
+  bodyClassName,
+  footerClassName,
+  titleClassName,
+  descriptionClassName,
+  closeLabel = '关闭对话框',
+}: AdminDialogProps) {
+  const resolvedLayout = layout ?? mode ?? (size === 'side-panel' ? 'side-panel' : 'center');
+  const isSidePanel = resolvedLayout === 'side-panel';
+  const sizeClasses =
+    size === 'sm'
+      ? 'max-w-[min(96vw,28rem)]'
+      : size === 'md'
+        ? 'max-w-[min(96vw,36rem)]'
+        : size === 'xl'
+          ? 'max-w-[min(96vw,56rem)]'
+          : size === '2xl'
+            ? 'max-w-[min(96vw,72rem)]'
+            : size === 'full'
+              ? 'max-w-[calc(100vw-2rem)]'
+              : 'max-w-[min(96vw,48rem)]';
+  const shellClasses = cn(
+    'glass-panel-no-hover relative flex min-h-0 w-full flex-col overflow-hidden text-gray-900 dark:text-gray-100',
+    isSidePanel
+      ? 'h-[100dvh] max-w-[min(100vw,40rem)] rounded-none border-l border-white/10 shadow-[0_30px_120px_rgba(0,0,0,0.55)]'
+      : cn('max-h-[min(calc(100dvh-3rem),48rem)] rounded-3xl border border-white/10 shadow-[0_30px_120px_rgba(0,0,0,0.55)]', sizeClasses),
+    panelClassName,
+  );
+
+  return (
+    <Dialog.Root open={open} onOpenChange={onOpenChange}>
+      <Dialog.Portal>
+        <Dialog.Overlay
+          className={cn(
+            'fixed inset-0 z-[100] bg-black/60 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out',
+            overlayClassName,
+          )}
+        />
+        <Dialog.Content
+          className={cn(
+            'fixed z-[101] outline-none',
+            isSidePanel
+              ? 'inset-y-0 right-0 flex w-full justify-end p-0'
+              : 'inset-0 flex items-center justify-center px-4 py-6 sm:px-6',
+            className,
+          )}
+          onEscapeKeyDown={(event) => {
+            if (!dismissible) {
+              event.preventDefault();
+            }
+          }}
+          onPointerDownOutside={(event) => {
+            if (!dismissible) {
+              event.preventDefault();
+            }
+          }}
+          onInteractOutside={(event) => {
+            if (!dismissible) {
+              event.preventDefault();
+            }
+          }}
+        >
+          <div className={shellClasses}>
+            <div
+              className={cn(
+                'flex items-start justify-between gap-4 border-b border-white/10 px-6 py-6',
+                !isSidePanel && 'rounded-t-3xl',
+                headerClassName,
+              )}
+            >
+              <div className="min-w-0">
+                <div className="flex items-start gap-4">
+                  {icon ? (
+                    <div
+                      className={cn(
+                        'mt-0.5 flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl border',
+                        accentClasses[accent],
+                      )}
+                    >
+                      {icon}
+                    </div>
+                  ) : null}
+                  <div className="min-w-0">
+                    <Dialog.Title className={cn('text-xl font-black tracking-tight text-gray-900 dark:text-gray-100', titleClassName)}>
+                      {title}
+                    </Dialog.Title>
+                    {description ? (
+                      <Dialog.Description
+                        className={cn('mt-3 text-sm leading-6 text-gray-600 dark:text-gray-300', descriptionClassName)}
+                      >
+                        {description}
+                      </Dialog.Description>
+                    ) : null}
+                  </div>
+                </div>
+              </div>
+
+              {showCloseButton ? (
+                <Dialog.Close asChild>
+                  <button
+                    type="button"
+                    className="rounded-full border border-white/10 p-2 text-gray-500 transition-colors hover:bg-white/10 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white"
+                    aria-label={closeLabel}
+                  >
+                    <X className="h-4 w-4" />
+                  </button>
+                </Dialog.Close>
+              ) : null}
+            </div>
+
+            <div className={cn('min-h-0 flex-1 overflow-y-auto px-6 py-6', bodyClassName)}>{children}</div>
+
+            {footer ? (
+              <div className={cn('border-t border-white/10 px-6 py-5', footerClassName)}>{footer}</div>
+            ) : null}
+          </div>
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}
diff --git a/front/src/components/admin/AdminInput.tsx b/front/src/components/admin/AdminInput.tsx
new file mode 100644
index 0000000..1863c29
--- /dev/null
+++ b/front/src/components/admin/AdminInput.tsx
@@ -0,0 +1,21 @@
+import { forwardRef, type InputHTMLAttributes } from 'react';
+import { cn } from '@/src/lib/utils';
+
+export type AdminInputProps = InputHTMLAttributes<HTMLInputElement>;
+
+export const AdminInput = forwardRef<HTMLInputElement, AdminInputProps>(function AdminInput(
+  { className, type = 'text', ...props },
+  ref,
+) {
+  return (
+    <input
+      ref={ref}
+      type={type}
+      className={cn(
+        'w-full rounded-lg border border-white/10 bg-white/10 px-4 py-3 text-[11px] font-black tracking-widest outline-none transition-colors placeholder:opacity-40 focus:border-blue-500/50 focus:ring-4 focus:ring-blue-500/10 disabled:cursor-not-allowed disabled:opacity-60',
+        className,
+      )}
+      {...props}
+    />
+  );
+});
diff --git a/front/src/components/admin/AdminSelect.tsx b/front/src/components/admin/AdminSelect.tsx
new file mode 100644
index 0000000..f1822ad
--- /dev/null
+++ b/front/src/components/admin/AdminSelect.tsx
@@ -0,0 +1,155 @@
+import * as Select from '@radix-ui/react-select';
+import { Check, ChevronDown, ChevronUp } from 'lucide-react';
+import { Children, isValidElement, type ReactNode } from 'react';
+import { cn } from '@/src/lib/utils';
+
+type AdminSelectChangeEvent = {
+  target: {
+    value: string;
+  };
+};
+
+type ParsedOption = {
+  value: string;
+  label: string;
+  disabled: boolean;
+};
+
+type WidthPreset = 'field' | 'filter' | 'compact' | 'fit';
+
+type AdminSelectProps = {
+  value: string | number;
+  onChange: (event: AdminSelectChangeEvent) => void;
+  children: ReactNode;
+  className?: string;
+  disabled?: boolean;
+  width?: WidthPreset;
+};
+
+const EMPTY_VALUE_SENTINEL = '__ADMIN_SELECT_EMPTY__';
+
+function stringifyNode(node: ReactNode): string {
+  if (typeof node === 'string' || typeof node === 'number') {
+    return String(node);
+  }
+
+  if (Array.isArray(node)) {
+    return node.map((item) => stringifyNode(item)).join('').trim();
+  }
+
+  if (isValidElement<{ children?: ReactNode }>(node)) {
+    return stringifyNode(node.props.children);
+  }
+
+  return '';
+}
+
+function parseOptions(children: ReactNode): { options: ParsedOption[]; hasEmptyOption: boolean } {
+  const options: ParsedOption[] = [];
+  let hasEmptyOption = false;
+
+  Children.forEach(children, (child) => {
+    if (!isValidElement<{ value?: string | number; disabled?: boolean; children?: ReactNode }>(child)) {
+      return;
+    }
+
+    const rawValue = child.props.value;
+    const value = rawValue == null ? '' : String(rawValue);
+    if (value === '') {
+      hasEmptyOption = true;
+    }
+
+    options.push({
+      value,
+      label: stringifyNode(child.props.children),
+      disabled: Boolean(child.props.disabled),
+    });
+  });
+
+  return { options, hasEmptyOption };
+}
+
+export function AdminSelect({
+  value,
+  onChange,
+  children,
+  className,
+  disabled = false,
+  width = 'field',
+}: AdminSelectProps) {
+  const { options, hasEmptyOption } = parseOptions(children);
+  const normalizedValue = String(value ?? '');
+  const resolvedValue = normalizedValue === '' && hasEmptyOption ? EMPTY_VALUE_SENTINEL : normalizedValue;
+  const selectedOption = options.find((option) => option.value === normalizedValue);
+  const placeholder = options.find((option) => option.value === '')?.label ?? '请选择';
+
+  return (
+    <Select.Root
+      value={resolvedValue}
+      disabled={disabled}
+      onValueChange={(nextValue) => {
+        const resolvedNextValue = nextValue === EMPTY_VALUE_SENTINEL ? '' : nextValue;
+        onChange({
+          target: {
+            value: resolvedNextValue,
+          },
+        });
+      }}
+    >
+      <Select.Trigger
+        className={cn(
+          'inline-flex w-full items-center justify-between gap-3 rounded-lg border border-white/10 bg-white/10 px-4 py-4 text-left text-sm font-bold text-gray-900 outline-none transition-all data-[placeholder]:text-gray-500 dark:text-gray-100 dark:data-[placeholder]:text-gray-400',
+          'focus:border-blue-500/50 focus:ring-4 focus:ring-blue-500/10 disabled:cursor-not-allowed disabled:opacity-60',
+          width === 'filter' && 'min-h-[3.25rem] text-[11px] font-black uppercase tracking-widest',
+          width === 'compact' && 'min-h-0 rounded-none border-0 bg-transparent p-0 pr-8 shadow-none focus:ring-0 focus:border-transparent text-[11px] font-black uppercase tracking-widest',
+          width === 'fit' && 'w-auto',
+          className,
+        )}
+      >
+        <Select.Value placeholder={placeholder}>
+          {selectedOption?.label}
+        </Select.Value>
+        <Select.Icon asChild>
+          <ChevronDown className="h-4 w-4 shrink-0 opacity-50" />
+        </Select.Icon>
+      </Select.Trigger>
+
+      <Select.Portal>
+        <Select.Content
+          position="popper"
+          sideOffset={8}
+          className="z-[120] overflow-hidden rounded-2xl border border-white/10 bg-gray-950/95 text-gray-100 shadow-[0_24px_80px_rgba(0,0,0,0.45)] backdrop-blur-2xl"
+        >
+          <Select.ScrollUpButton className="flex h-8 items-center justify-center text-gray-400">
+            <ChevronUp className="h-4 w-4" />
+          </Select.ScrollUpButton>
+          <Select.Viewport className="min-w-[var(--radix-select-trigger-width)] p-2">
+            {options.map((option) => {
+              const optionValue = option.value === '' ? EMPTY_VALUE_SENTINEL : option.value;
+
+              return (
+                <Select.Item
+                  key={`${optionValue}-${option.label}`}
+                  value={optionValue}
+                  disabled={option.disabled}
+                  className={cn(
+                    'relative flex cursor-default select-none items-center rounded-xl py-2.5 pl-3 pr-9 text-sm font-bold text-gray-100 outline-none transition-colors',
+                    'data-[highlighted]:bg-blue-500/15 data-[highlighted]:text-blue-300 data-[disabled]:pointer-events-none data-[disabled]:opacity-35',
+                  )}
+                >
+                  <Select.ItemText>{option.label}</Select.ItemText>
+                  <Select.ItemIndicator className="absolute right-3 inline-flex items-center justify-center text-blue-300">
+                    <Check className="h-4 w-4" />
+                  </Select.ItemIndicator>
+                </Select.Item>
+              );
+            })}
+          </Select.Viewport>
+          <Select.ScrollDownButton className="flex h-8 items-center justify-center text-gray-400">
+            <ChevronDown className="h-4 w-4" />
+          </Select.ScrollDownButton>
+        </Select.Content>
+      </Select.Portal>
+    </Select.Root>
+  );
+}
diff --git a/memory.md b/memory.md
index 31b2fec..2950892 100644
--- a/memory.md
+++ b/memory.md
@@ -6,13 +6,16 @@
   - 项目主线已经从旧教务模块切换为“网盘 + 快传 + 管理台”结构
   - 快传模块已整合进主站，支持取件码、分享链接、P2P 传输、部分文件接收、ZIP 下载、存入网盘
   - 网盘已支持上传、下载、重命名、删除、移动、复制、公开分享、接收快传后存入
+  - 2026-04-12 已将管理台治理页里的原生 `<select>` 迁移到共享 `AdminSelect`，当前覆盖 `shares`、`fileblobs`、`tasks` 三页，筛选行为和后端调用保持不变
   - 注册改成邀请码机制，邀请码单次使用后自动刷新，并在管理台展示与复制
   - 同账号现已允许桌面端与移动端同时在线，但同一端类型仍只保留一个有效会话；同端再次登录会在下一次受保护请求时挤掉旧会话
   - 后端已补生产 CORS，默认放行 `https://yoyuzh.xyz` 与 `https://www.yoyuzh.xyz`
   - 线上文件存储与前端静态托管已迁到多吉云对象存储，后端通过临时密钥 API 获取短期 S3 会话访问底层 COS 兼容桶
   - 管理台 dashboard 已显示总存储量、下载流量、今日请求次数、快传使用量、离线快传占用和请求折线图，并支持调整离线快传总上限
   - 管理台用户列表已显示每个用户的已用空间 / 配额，表格也已收紧
-  - 游戏页已接入 `/race/`、`/t_race/`，带站内播放器、退出按钮和友情链接
+- 2026-04-12 已将 `用户策略` 的右侧编辑壳迁移到共享 `AdminDialog` side-panel 模式，保留原有表格、表单字段、快捷操作与后端调用
+- 2026-04-12 已新增共享 `AdminInput` 基础输入壳，当前只覆盖 admin 目录下的文本 / 数字输入视觉和 `forwardRef` 接口，不引入额外依赖，也不改 admin 页面
+- 游戏页已接入 `/race/`、`/t_race/`，带站内播放器、退出按钮和友情链接
   - 2026-04-02 已统一密码策略为“至少 8 位且包含大写字母”，并补测试确认管理员改密后旧密码失效、新密码生效
   - 2026-04-02 已放开未登录直达快传：登录页可直接进入快传，匿名用户可发在线快传；2026-04-03 又放开了离线接收，因此匿名用户现在可发在线快传、接收在线快传、接收离线快传，但发离线和把离线文件存入网盘仍要求登录
   - 2026-04-02 快传发送页已新增“我的离线快传”区域：登录用户可查看自己未过期的离线快传记录，并点开弹层重新查看取件码、二维码和分享链接
@@ -1043,3 +1046,121 @@
 - 本批前端验证通过：
 - `cd front && npm run lint`
 - `cd front && npm run build`
+
+## 2026-04-12 Frontend OSS Refactor Batch 36
+
+- 前端 OSS 替换计划的 Batch 4 已完成，管理台已移除原生 `window.alert` / `window.confirm`。
+- `front/package.json` / `front/package-lock.json` 已新增 `@radix-ui/react-alert-dialog` 依赖。
+- 新增 `front/src/components/admin/AdminAlertDialog.tsx`，当前管理台确认动作统一走 Radix Alert Dialog，并保持现有玻璃态视觉风格。
+- `front/src/admin/settings.tsx` 已将“轮换邀请码”改为站内确认对话框，不再使用系统确认框。
+- `front/src/admin/shares.tsx` 已将“删除分享”改为站内确认对话框，同时把复制 Token 成功/失败改为页内 notice / error。
+- `front/src/admin/files-list.tsx` 已将“彻底删除文件”改为站内确认对话框，不再使用系统确认框。
+- `front/src/admin/filesystem.tsx`、`front/src/admin/fileblobs.tsx`、`front/src/admin/audits.tsx` 的复制失败提示已改为页内反馈，不再使用系统弹窗。
+- 当前 `front/src/admin` 下已不存在原生 `window.alert` 或 `window.confirm`。
+- OSS 替换执行计划 `docs/superpowers/plans/2026-04-12-admin-oss-refactor.md` 已继续打钩更新。
+- 本批前端验证通过：
+- `cd front && npm run lint`
+- `cd front && npm run build`
+
+## 2026-04-12 Frontend OSS Refactor Batch 37
+
+- 前端 OSS 替换计划的 Batch 5 已推进到 `front/src/admin/storage-policies-list.tsx`。
+- 该页原先手写的两个 overlay 已切到共享 `AdminDialog`：
+- 新建 / 编辑策略弹层
+- 发起迁移弹层
+- 迁移说明与页面级迁移通知 banner 保持原样。
+- 后端调用、字段校验、保存逻辑和迁移任务创建逻辑均未改动。
+- 共享对话框文件 `front/src/components/admin/AdminDialog.tsx` 已补齐 `mode` / `layout` 兼容，避免影响并发改动中的用户策略页面。
+- 本批前端验证通过：
+- `cd front && npm run lint`
+- `cd front && npm run build`
+
+## 2026-04-12 Frontend OSS Refactor Batch 38
+
+- 前端 OSS 替换计划的 Batch 5 已完成，管理台的手写 modal / side-sheet 壳已切到 Radix Dialog。
+- `front/package.json` / `front/package-lock.json` 已新增 `@radix-ui/react-dialog` 直接依赖。
+- 新增 `front/src/components/admin/AdminDialog.tsx`，当前统一提供：
+- 居中 modal 布局
+- 右侧 side-panel 布局
+- `layout` / `mode` 兼容参数
+- 统一 header / body / footer / close / dismiss 行为
+- `front/src/admin/storage-policies-list.tsx` 已将：
+- 新建 / 编辑策略弹层
+- 发起迁移弹层
+- 全部迁移到共享 `AdminDialog`
+- `front/src/admin/users-list.tsx` 已将用户策略编辑壳从页面内手写右侧面板切换为共享 `AdminDialog` 的 `side-panel` 布局，表格、表单字段、临时密码、禁用/恢复与后端调用均保持不变。
+- OSS 替换执行计划 `docs/superpowers/plans/2026-04-12-admin-oss-refactor.md` 已继续打钩更新，Task 5 已完成。
+- 本批前端验证通过：
+- `cd front && npm run lint`
+- `cd front && npm run build`
+
+## 2026-04-12 Frontend OSS Refactor Batch 39
+
+- 前端 OSS 替换计划的 Batch 6 已推进到 `front/src/admin/storage-policies-list.tsx`。
+- 该页原先手写的两个 `<select>` 已切到共享 `AdminSelect`：
+- 新建 / 编辑策略里的驱动协议选择
+- 发起迁移里的目标策略选择
+- 由于当前仓库里还没有现成的 `AdminSelect` 文件，我补了一个本地共享包装组件到 `front/src/components/admin/AdminSelect.tsx`，用原生 select 保持行为不变。
+- 其他页面、包依赖和后端调用均未改动。
+- OSS 替换执行计划 `docs/superpowers/plans/2026-04-12-admin-oss-refactor.md` 已继续打钩更新，Task 6 的 storage-policy 子步骤已完成。
+- 本批前端验证通过：
+- `cd front && npm run lint`
+- `cd front && npm run build`
+
+## 2026-04-12 Frontend OSS Refactor Batch 40
+
+- 前端 OSS 替换计划的 Batch 6 已完成，管理台当前目标范围内的手写单选下拉已切到 Radix Select。
+- `front/package.json` / `front/package-lock.json` 已新增 `@radix-ui/react-select` 依赖。
+- 新增 `front/src/components/admin/AdminSelect.tsx`，当前是一个基于 Radix Select 的共享单选包装组件：
+- 兼容当前页面已有的 `<option>` children 调用方式
+- 兼容现有 `onChange(event)` 形状，减少页面改造面
+- 对空值选项做 sentinel 映射，允许“全部 / 未设置”这类选项继续工作
+- `front/src/admin/shares.tsx` 已将密码保护、过期状态筛选切到共享 `AdminSelect`。
+- `front/src/admin/fileblobs.tsx` 已将实体类型筛选切到共享 `AdminSelect`。
+- `front/src/admin/tasks.tsx` 已将“每页条数”选择器切到共享 `AdminSelect`，紧凑样式保持原样。
+- `front/src/admin/storage-policies-list.tsx` 已将：
+- 新建 / 编辑策略里的驱动协议选择
+- 发起迁移里的目标策略选择
+- 切到共享 `AdminSelect`。
+- 当前 `front/src/admin` 里仍保留的原生 `<select>` 仅剩 `front/src/admin/users-list.tsx` 的角色字段；它属于 `react-hook-form` 驱动表单，不在 Batch 6 范围内。
+- OSS 替换执行计划 `docs/superpowers/plans/2026-04-12-admin-oss-refactor.md` 已继续打钩更新，Task 6 已完成。
+- 本批前端验证通过：
+- `cd front && npm run lint`
+- `cd front && npm run build`
+
+## 2026-04-12 Frontend OSS Refactor Batch 41
+
+- 前端 OSS 替换计划的 Batch 7 已完成，管理台剩余的原生表单单选已清空。
+- `front/src/admin/users-list.tsx` 已将 `react-hook-form` 驱动的 `role` 字段切到共享 `AdminSelect`，通过 `Controller` 保持：
+- 字段值同步
+- 表单校验
+- 提交流程
+- 现有 `watchedRole` 展示
+- 当前 `front/src/admin` 下已不存在原生 `<select>`。
+- OSS 替换执行计划 `docs/superpowers/plans/2026-04-12-admin-oss-refactor.md` 已继续打钩更新，Task 7 已完成。
+- 本批前端验证通过：
+- `cd front && npm run lint`
+- `cd front && npm run build`
+
+## 2026-04-12 Frontend OSS Refactor Batch 42
+
+- 前端 OSS 替换计划的 Batch 8 已按当前 scope 完成，`settings.tsx` 与 `storage-policies-list.tsx` 的可编辑文本/数字输入已切到共享 `AdminInput`。
+- 新增 `front/src/components/admin/AdminInput.tsx`，作为统一的 admin 输入壳：
+- 保留原生 `<input>` 行为
+- 兼容 `react-hook-form register`
+- 兼容受控 `value/onChange`
+- 保留现有 focus、disabled、validation affordances
+- `front/src/admin/settings.tsx` 已将邀请码与离线快传上限输入切到共享 `AdminInput`，校验、提交和后端调用保持不变。
+- `front/src/admin/storage-policies-list.tsx` 已将策略名称、端点、桶、对象上限与迁移目标 ID 输入切到共享 `AdminInput`，保存与迁移逻辑保持不变。
+- 当前 batch 明确未改 `front/src/admin/users-list.tsx`，它已从本次 scope 中延期。
+- OSS 替换执行计划 `docs/superpowers/plans/2026-04-12-admin-oss-refactor.md` 已继续打钩更新，Task 8 的当前 scope 已完成。
+
+## 2026-04-12 Frontend OSS Refactor Batch 43
+
+- `front/src/admin/users-list.tsx` 的用户策略编辑面板已把可编辑的文本、数字和密码输入切到共享 `AdminInput`。
+- 现在这三个字段都保留了原有的 `react-hook-form` 注册、验证和提交行为：
+- `storageQuotaBytes`
+- `maxUploadSizeBytes`
+- `manualPassword`
+- 新增的 `front/src/components/admin/AdminInput.tsx` 仍然只是薄包装，没有引入 label、error、prefix 或其他额外抽象。
+- OSS 替换执行计划 `docs/superpowers/plans/2026-04-12-admin-oss-refactor.md` 已同步更新为当前 users-list scope。