diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
new file mode 100644
index 0000000..b77d03d
--- /dev/null
+++ b/.github/workflows/ci.yml
@@ -0,0 +1,30 @@
+name: CI
+
+on:
+  pull_request:
+    branches:
+      - main
+
+concurrency:
+  group: "ci-${{ github.ref }}"
+  cancel-in-progress: true
+
+jobs:
+  check:
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+    steps:
+      - uses: actions/checkout@v7
+      - uses: oven-sh/setup-bun@v2
+
+      - name: Install
+        run: bun install --frozen-lockfile
+
+      - name: Typecheck
+        run: bun run typecheck
+
+      - name: Lint
+        run: bun run lint
+
+      - name: Test
+        run: bun run test
diff --git a/.github/workflows/gh-pages.yml b/.github/workflows/gh-pages.yml
index fb3cf9c..bb70779 100644
--- a/.github/workflows/gh-pages.yml
+++ b/.github/workflows/gh-pages.yml
@@ -12,17 +12,19 @@ concurrency:
 jobs:
   deploy:
     runs-on: ubuntu-latest
-    timeout-minutes: 8
+    timeout-minutes: 12
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v7
       - uses: oven-sh/setup-bun@v2
-      - uses: actions/setup-node@v4
-        with:
-          node-version: "20.x"
+
+      - name: Install
+        run: bun install --frozen-lockfile
+
+      - name: Check (typecheck, lint, test)
+        run: bun run ci
 
       - name: Build
         run: |
-          bun install --frozen-lockfile
           bun run build
           cp CNAME dist/
           cp .nojekyll dist/
diff --git a/biome.json b/biome.json
index 587434f..1f3604f 100644
--- a/biome.json
+++ b/biome.json
@@ -1,7 +1,15 @@
 {
   "files": {
     "ignoreUnknown": false,
-    "includes": ["src/**", "*.json", "*.ts", "*.js", "!dist", "!node_modules"],
+    "includes": [
+      "src/**",
+      "*.json",
+      "*.ts",
+      "*.js",
+      "!dist",
+      "!node_modules",
+      "!src/**/*.css"
+    ],
     "maxSize": 1048576
   },
   "linter": {
diff --git a/docs/project-review.md b/docs/project-review.md
new file mode 100644
index 0000000..035d6cf
--- /dev/null
+++ b/docs/project-review.md
@@ -0,0 +1,231 @@
+# pushy-admin 全局 Review 与改进建议
+
+> Review 日期：2026-07-04
+> 技术栈：React 19.2 · Ant Design 6.5 · Tailwind CSS 4.3 · TanStack Query 5 · react-router 7 · rsbuild · Bun
+> 覆盖维度：UI/视觉设计（重点）、代码架构与质量、国际化与文案、性能与工程化
+
+---
+
+## 总体评价
+
+项目整体基础扎实：路由级懒加载全部到位（首屏入口仅 ~54K）、外链 `rel="noopener noreferrer"` 全部合规、无 `dangerouslySetInnerHTML`、open-redirect 已有防护、i18n 框架搭建正确、纯函数已有 6 个测试文件。
+
+主要短板集中在三块：
+
+1. **视觉设计缺乏"单一来源"**——主色存在三种蓝、语义色大量硬编码 hex、无暗色模式、`page-section` 是未定义的幽灵类；
+2. **数据写路径不统一**——`request.ts` 的 401/非 200 处理有实际 bug，缓存副作用埋在 service 层导致无 loading/无回滚；
+3. **工程门禁缺失**——CI 不跑 typecheck/lint/test，`package.json` 甚至没有 `test` 脚本，已有测试形同虚设。
+
+---
+
+## 一、UI / 视觉设计（重点）
+
+### 1.1 【高】品牌色没有单一定义源，全站存在"三种蓝"
+
+| 来源 | 颜色 | 位置 |
+|---|---|---|
+| 品牌色（meta/logo） | `#4483ED` | `index.html:7` |
+| antd 默认主色 | `#1677ff` | `src/index.tsx:74` 的 `ConfigProvider` 未设 `theme.token.colorPrimary`，所有 primary 按钮走默认值 |
+| Tailwind 蓝 | `#2563eb` (blue-600) | `top-navigation.tsx:355,690`、`app-detail-header.tsx:123-125`、`app-drawer.tsx:352,380,384`、`manage/index.tsx:97`、`daily-check-quota.tsx:113,266`（Progress `strokeColor` 硬编码） |
+
+**建议**：以品牌色为准，建立唯一色源：
+
+```tsx
+<ConfigProvider theme={{ token: { colorPrimary: '#4483ED' }, cssVar: true }}>
+```
+
+开启 antd 6 的 `cssVar` 后，在 Tailwind 4 的 `@theme` 中把 `--color-primary` 映射到 `var(--ant-color-primary)`，随后全仓替换 `blue-600/blue-500` 硬编码。**这是本次 review 中投入产出比最高的一项改动。**
+
+### 1.2 【高】语义色（成功/警告/错误）大量硬编码 hex
+
+- `manage/components/bind-package.tsx:89-164`：`#dc2626`(红)、`#16a34a`(绿)、`#d97706`(橙)、`#6b7280`(灰) 反复内联；
+- `daily-check-quota.tsx:110-160,263-352` 与 `user.tsx:979-988`：`#ef4444 / #f59e0b / #2563eb / #fecaca / #fde68a / #e5e7eb` 成组重复出现 **3 处**；
+- 零散：`audit-logs.tsx:487` `#ff4d4f`、`utils/notice.tsx:11` `#f50`、`main-layout.tsx:57,63` `#fff`/`#e5e7eb`、`platform-icon.tsx:19-24` `#3ddc84`/`#a6b1b7`。
+
+**建议**：统一改用 antd token（`colorError/colorSuccess/colorWarning/colorTextSecondary`）或 Tailwind 语义类；把配额三态颜色（exceeded/low/normal 的 `strokeColor/trailColor/边框/文字`）抽成一个 helper，消除三处重复。
+
+### 1.3 【高】完全不支持暗色模式，且硬编码浅色会在暗色下破裂
+
+- `ConfigProvider` 无 `theme.algorithm`，全仓无 `darkAlgorithm`/`prefers-color-scheme` 相关代码；`manage/index.tsx:217` Sider 还硬编码 `theme="light"`。
+- 即使将来接入 antd 暗色算法，这些硬编码也会导致白底黑字撕裂：`main-layout.tsx:57 background:'#fff'`、`index.css:41 .body{background:#fff}`、`app-drawer.tsx:110 bg-white`、`manage.css:33,36,62`（`#fff`/`#e6f7ff`/`#f0f0f0`）、大量 `text-slate-* / text-gray-* / bg-slate-50`。
+
+**建议**：`theme.algorithm` 跟随 `prefers-color-scheme`（并提供手动切换），底色/文字统一走 token 或补 `dark:` 变体。建议与 1.1 一起做，先建立 token 体系再谈暗色。
+
+### 1.4 【中】`page-section` 是"幽灵类"——8 处使用但无任何定义
+
+`admin-apps.tsx:280`、`admin-users.tsx:588`、`admin-config.tsx:213`、`admin-metrics.tsx:370`、`admin-service-status.tsx:1052`、`home.tsx:11`、`admin-route.tsx:43,59` 都用了 `className="page-section"`，但 `index.css` 与 `manage.css` 中**没有该类的定义**。页面容器留白目前只靠 `.ant-layout-content{padding:24px}`（`index.css:17`），没有统一最大宽度。
+
+**建议**：新建 `PageContainer` 组件（max-width + `margin-inline: auto` + 统一 padding + 统一标题层级），替换所有 `page-section`。
+
+### 1.5 【中】页面标题层级混乱
+
+`apps.tsx:80` 用 `Title level={3}`；admin 系列页面用 `level={4}`；`admin-service-status.tsx` 内部 `level={5}` 与 `level={4}` 混用；`audit-logs.tsx:605` 干脆用原生 `<h2 class="text-lg font-semibold md:text-xl">`。
+
+**建议**：随 `PageContainer` 统一页面主标题（如固定 `level={4}`）。
+
+### 1.6 【中】加载态只有 Spin、无 Skeleton；空状态样式不统一
+
+- `Spin` 出现在 11 个文件，`Skeleton` 全仓零命中；全屏 loading 容器高度不一（`home.tsx:11 min-h-64`、`user.tsx:604 h-screen`、`admin-route.tsx:43 min-h-64`）。
+- `Empty` 有的用 `PRESENTED_IMAGE_SIMPLE`（`app-drawer:217`），有的用默认大图（`apps:124`），内边距 `my-8` vs `py-16` 各异。
+
+**建议**：卡片列表/表格首屏改用 Skeleton 骨架；封装统一的 `EmptyState` 与页面级 loading 容器。
+
+### 1.7 【中】inline style 与 Tailwind 混用、圆角/魔法数字无系统
+
+- 内联 style：`main-layout.tsx:55-74`、`login.tsx:74-85`、`register.tsx:148-159`（整套 auth 布局）、`manage/index.tsx:183,220,228`、`commit.tsx:7-11`。
+- 圆角混用：`rounded-lg`（app-drawer:110）、`rounded-xl`（user:893）、`rounded-2xl`（apps:164,183）、`rounded-md`。
+- 魔法数字：`user.tsx:705 width:134`、`login:78 maxWidth:360`、`app-drawer:111 w-[280px]`、`commit.tsx:8-9 maxWidth:288/maxHeight:240`、`user.tsx:237/559 w-[340px]/w-[560px]`。
+
+**建议**：约定圆角/间距/阴影三套刻度（如卡片统一 `rounded-lg`）；auth 三页（login / register / reset-password 目前分别是内联 360 表单 / Card 640 / w-80）统一为一个 `AuthLayout`。
+
+### 1.8 【中】视觉细节
+
+- **图标风格不统一**：`platform-icon.tsx` 中 android/ios 用 `AndroidFilled/AppleFilled`，harmony 却用 `HarmonyOSOutlined`（:24）；设置图标在 `app-detail-header.tsx:73` 是 `SettingFilled`，在 `app-drawer.tsx:429`、`top-navigation.tsx:841` 是 `SettingOutlined`。
+- **删除按钮过重**：`app-settings-modal.tsx:164-180` 同时 `type="primary" + danger + DeleteFilled`，实心大红块视觉侵略性强；确认弹窗已有 `okButtonProps:{danger:true}`，按钮本身用普通 `danger` 即可。
+- **`create-app-modal.tsx:15-21`**：用 `Modal.confirm` 承载表单，裸 `<br/>` 撑间距，表单值存闭包变量；应改受控 `Modal` + `Form`。
+- **`footer.tsx:13-17`**：备案图标引用 alicdn 固定小图无加载兜底。
+- **`index.html:5`**：viewport 缺 `initial-scale=1`。
+- **`manage.css:103-111`**：移动端 Sider 用 6 个 `!important` 对抗 antd 内联宽度，脆弱；建议移动端直接不渲染 Sider（复用现有 Tabs 分支 `manage/index.tsx:186`）。
+
+### 1.9 设计系统层面路线图
+
+1. **唯一色源**：`ConfigProvider theme.token` + `cssVar:true`，Tailwind `@theme` 消费 antd CSS 变量，替换全部硬编码 hex 与 `blue-*`。
+2. **暗色模式**：token 体系建立后接 `darkAlgorithm` + `prefers-color-scheme`，清理硬编码浅色。
+3. **布局/状态原语**：`PageContainer`、`AuthLayout`、`EmptyState`、Skeleton 骨架，替换幽灵类与各自为政的容器。
+4. **设计刻度**：圆角/间距/阴影三套刻度成文，biome/lint 禁止新增裸 hex 与内联 style。
+5. **业务视觉逻辑收敛**：配额三态颜色 helper、图标填充风格规范、danger 按钮使用规范。
+
+---
+
+## 二、代码架构与质量
+
+### 2.1 数据层
+
+- **【严重】`request.ts:84-87`：401 静默返回 `undefined` 而非 reject**。api.ts 中大量 `request(...).then(() => queryClient.setQueryData(...))`（deleteApp:202、updateApp:226、updatePackage:259、deletePackage:273、deleteVersion:335），401 下 `.then` 仍执行——**请求实际失败但前端缓存已被乐观删除/修改**。应 `throw RequestError`。
+- **【严重】`request.ts:89`：无条件 `response.json()` 且仅 `status===200` 视为成功**。204/201/网关 HTML 错误页会抛 SyntaxError，被外层 catch 吞掉后统一提示"如有使用代理，请关闭代理"，误导用户。应按 `response.ok` + `content-type` 处理。
+- **【高】query key 魔法字符串**：只有 versions 走了 `query-keys.ts` 工厂，`['appList']`、`['app', appId]`、`['packages', appId]`、`['bindings', appId]` 在 api.ts（203/227/261/276/291/426/435）与 hooks.ts 两处重复散落。
+- **【高】`setQueryData` updater 解构未防 undefined**：`api.ts:262/276/291` 直接 `({ data }: { data: Package[] }) => ...`，缓存为空时抛 TypeError；而 `deleteVersion:338`、`deleteBinding:436` 已是正确写法，风格不一。
+- **【高】缓存副作用埋在 service 层，两套 mutation 范式并存**：manage 相关组件直接调 `api.deleteVersion()`——无 loading、无 onError、无回滚；而 api-tokens / admin-apps / admin-users 等又规范地用 `useMutation`。应统一：service 只做纯请求，副作用移到 `useMutation` 的 onSuccess/onError。
+- **【中】`hooks.ts:349-384` useAuditLogs**：一次拉 1000 条前端分页，`queryKey: ['auditLogs']` 不含筛选参数。
+- **【中】`hooks.ts:176`**：`enabled: () => !!getToken()` 依赖模块级可变 `_token`，非响应式，登录/登出靠 `window.location.reload()` 兜底。
+- **【中】`request.ts:30-40`**：模块加载即并发 ping 多域名（IIFE 副作用）+ 生产残留 `console.log('baseUrl', ...)`（:37）。
+
+### 2.2 组件设计
+
+- **【高】超大组件**（>300 行，前几名）：`user.tsx` 1308、`admin-service-status.tsx` 1078、`top-navigation.tsx` 919、`audit-logs.tsx` 802、`admin-users.tsx` 747、`realtime-metrics.tsx` 610、`bind-package.tsx` 556、`api.ts` 517。建议按「数据 hook / 纯展示组件 / 命令式弹窗」三层拆分。
+- **【高】可变闭包代替受控状态**：`version-table.tsx:277-333` 与 `package-list.tsx:174-215`（以及 `login.tsx:9` 模块级 `let email,password`）用 `let value = ...` + onChange 赋值 + `Modal.confirm` 提交，绕过 React 数据流，难测试、易 stale、表单校验失效。应抽受控 `Form` 组件。
+- **【中】`version-table.tsx:274,350`**：`getColumns(t)` 未 memo，且 `TextColumn`（每行每列渲染）内部又调一次完整 `getColumns(t)` 只为取 title——N 行 × M 列次全量列构建。`useMemo` + title 作 prop 传入。
+- **【中】`version-table.tsx:278-287`**：手写补零拼日期，项目已有 dayjs。
+- **【中】`helper.ts:95-170` + `top-navigation.tsx:194-200,500-506`**：drawer 状态用 `CustomEvent` + `storage` 事件在 window 上手搓全局状态，主/移动两处重复监听。应改 context 或轻量 store。
+- **【中】`manage/index.tsx:146-169`**：已有 ManageContext 仍 props drilling 传 selection 状态。
+
+### 2.3 路由与鉴权
+
+- **【高】token 存 localStorage**（`request.ts:6-13`），XSS 可窃取。优先 httpOnly cookie；若架构受限，至少强化 CSP 并记录该权衡。
+- **【高】`auth.ts:19-30` 与 `router.tsx:45-56`**：open-redirect 防护逻辑几乎逐行重复，应抽公共函数。
+- **【中】`admin-route.tsx`**：自造代码分割（useEffect 手动 `load().then(setComponent)` + 渲染期 throw），与其余路由的 `lazy:` 是两套机制、双重 Spin。另 admin 鉴权是纯前端判断（`user.admin`），需确认服务端有二次校验。
+- **【中】`auth.ts:52-59`**：logout 触发 `location.reload()`，配合 401→logout，接口持续 401 时有反复刷新风险。
+
+### 2.4 类型
+
+- **【高】`globals.d.ts:58-76`**：把 `User/App/Package/Version` 等领域类型声明为全局 ambient 类型，全项目免 import 使用——隐藏依赖、妨碍重构。应删除，改显式 `import type`。
+- **【中】断言/any 滥用**（全仓约 64 处）：`version-table.tsx:322` 双重 `as unknown as`、`:288 let editable: any`、`types.ts:58/99/160` 与 `api.ts:19/27` 的 `Record<string, any>` / `Record<any,any>`。
+- **【中】`globals.d.ts:24-56`**：手写 `bun:test` 类型，与 `@types/bun` 重复维护。
+
+### 2.5 健壮性
+
+- **【中】`index.tsx:73-79`**：RouterProvider 外层无 React ErrorBoundary，Provider 级异常会白屏。
+- **【低】`utils/notice.tsx:28-33`**：import 即弹窗的模块顶层副作用（当前虽未被引入，但模式危险）。
+
+---
+
+## 三、国际化与文案
+
+> 好消息：en.json 与 zh-CN.json 的 key 完全对齐（各 682 个，无单边 key）；antd `ConfigProvider locale` 与语言切换器逻辑正确。以下问题主要是"代码引用了但两边 JSON 都没有的 key"与硬编码中文。
+
+### 3.1 【高】20 个缺失 key，界面直接显示原始 key
+
+- `admin-users.tsx:142-147`：`translate = (key, fallback) => t ? t(key) : fallback` 中 `t` 恒为真，中文 fallback 是死代码；而其引用的 **14 个 `admin_users.*` key**（`detail_title, basic_info, quota_usage, pv_limit, today_used, today_remaining, avg_7_days, last_7_days_details, app_limit, package_limit, apps_and_packages, packages_count, pkg_name, col_note`）两边 JSON 都不存在——用户详情面板显示 `admin_users.detail_title` 这类原始字符串。
+- `audit-logs.tsx:426-428`：Excel 导出列头 `audit_logs.col_browser / col_os / col_ip_addr` 缺失。
+- `manage/index.tsx:178`、`version-table.tsx:387`：`common.search` 缺失，搜索框 placeholder 显示 "common.search"。
+
+**建议**：补齐 20 个 key；顺手修掉（或删除）失效的 translate helper。
+
+### 3.2 【高】硬编码中文（英文用户看到中文）
+
+- `utils/notice.tsx:7-21`：整个升级公告 Modal（含 "我知道了"/"不再显示"）全中文。
+- `utils/hooks.ts:184,190-191,198`：`'定制版'`、`'YYYY年MM月DD日'`（应复用已有 `user.date_format` key）、`'无'`、`` `(剩余 ${remainingDays} 天，之后转为免费版)` ``。
+- `constants/quotas.ts:3-106`：套餐 title/summary 全中文，且 `user.tsx:300,613` 直接渲染原始 title——而 `daily-check-quota.tsx:15` 的 `getTierTitle` 已正确本地化，说明 user.tsx 两处漏改。
+- `bind-package.tsx:22-279`：`changeType: '新增' | '移除' | '版本变更'` 中文同时当枚举值和展示文案，应改英文枚举 + 显示层 `t()`。
+- `auth.ts:39,46`（'登录成功'/'登录失败'）、`request.ts:111-112`（全局错误提示"如有使用代理，请关闭代理后重试"——出现频率最高的一条）。
+
+### 3.3 【高】`hooks.ts:10` 全局 `dayjs.locale('zh-cn')` 模块副作用
+
+一旦 import 就锁死 dayjs 中文；`audit-logs.tsx:247` 又有局部切换，行为依赖加载顺序。`commit.tsx` 的 `fromNow()` 在英文环境可能仍显示"几秒前"。**建议**：删除该行，在 App 顶层随 `i18n.language` 统一切换 dayjs locale（一次）。
+
+### 3.4 【低】细节
+
+- `index.tsx:71`：antd locale 兜底是 `zhCN`，而 i18n `fallbackLng` 是 `'en'`，不一致，建议统一为 en。
+- en.json 术语大小写：`"Native packages"` vs `"Native Packages"` 混用（en.json:77 vs 96/622/654）。
+- `realtime_metrics.unknown` 在 zh-CN 中仍是 "unknown"，应为"未知"。
+- 数字格式 `toLocaleString()` 未传 locale 参数。
+- 无障碍整体覆盖较好（aria-label/role/aria-selected 都有）；`notice.tsx:11` 的 `#f50` 橙色文字对比度偏低。
+
+---
+
+## 四、性能与工程化
+
+### 4.1 【高】CI 无质量门禁，测试形同虚设
+
+- `.github/workflows/gh-pages.yml:23-28` 只有 `bun install && bun run build && 部署`，不跑 typecheck / lint / test。
+- `package.json` **没有 `test` 脚本**，但项目有 6 个测试文件 + `bun-test-setup.ts` + bunfig preload——基础设施齐全却无人执行。
+
+**建议**：新增 `"test": "bun test"`；CI 在 build 前加 `bun run typecheck`、`biome check .`（只读）、`bun test` 三道门禁。
+
+### 4.2 【中】bundle 优化
+
+- 路由级懒加载已全部到位（👍 首屏 54K）。
+- `@ant-design/charts` 产出 ~1.4M + 996K 异步 chunk（`realtime-metrics.tsx:1`、`admin-service-status.tsx:1`、`admin-metrics.tsx:1` 静态引入），仅用到折线图；可换按需子包/轻量库，或组件级再 lazy 一层。
+- `vanilla-jsoneditor`（含 CodeMirror）被静态打进最高频的应用管理页 chunk（`version-table.tsx:28`），但只在"编辑 metaInfo"的 Modal 里用到——改 `React.lazy` 按需加载。
+- `xlsx` 已动态 import（👍 `audit-logs.tsx:397`），但 0.18.5 有已知 CVE（原型污染/ReDoS）且 npm 版已停更；当前只用于导出、风险低，仍建议换 SheetJS 官方源或轻量导出库消除 SCA 告警。
+
+### 4.3 【中】TanStack Query 配置
+
+`queryClient.ts:3-9` 全局 `staleTime: 5000` 过短，配合默认 `refetchOnWindowFocus: true`，切标签页就重复请求。建议列表类提到 30–60s 或关闭聚焦重取（实时页已有局部 `refetchInterval`，不受影响）。
+
+### 4.4 【低】脚本与 lint
+
+- `lint` 脚本 = `tsgo && biome check --write .`：校验命令带 `--write` 副作用，且与 `typecheck` 重叠。拆为只读 `lint` + `format`/`lint:fix`。
+- `biome.json` 关闭了 `noExplicitAny`、`noNonNullAssertion` 等，与 2.4 的 any 泛滥互为因果，建议先设 `warn` 逐步收敛。
+- rsbuild 可接入体积分析插件 + CI 体积门禁，防止重库进首屏。
+
+---
+
+## 五、优先级路线图
+
+### P0 — bug 与门禁（1~2 天）✅ 已完成（2026-07-04）
+
+1. ✅ 修 `request.ts`：401 改为 throw；按 `response.ok` + content-type 处理响应（§2.1）。响应处理逻辑抽到 `src/services/response.ts`，并新增 `response.test.ts`（7 个用例覆盖 401/204/非 JSON/2xx/业务错误/suppressErrorToast）。同时修复 `api.ts` 中 packages 系列 `setQueryData` 未防 undefined 的崩溃隐患。
+2. ✅ 补齐 20 个缺失 i18n key（admin_users 详情 14 个、audit 导出列头 3 个、`common.search`、以及 `col_note`/`detail_title` 等），修复 admin-users 失效的 translate helper（改用 `useTranslation`）。两份 locale key 完全对齐。
+3. ✅ `package.json` 加 `test`/`lint`（只读）/`lint:fix`/`ci` 脚本；新增 `.github/workflows/ci.yml`（PR 触发 typecheck+lint+test），并在 `gh-pages.yml` 部署前加同款门禁。
+4. ✅ 移除全局 `dayjs.locale('zh-cn')`，新建 `src/utils/dayjs.ts` 统一注册插件并随 i18n 语言切换 locale；i18n `fallbackLng` 与 antd locale 兜底均保持 `zh-CN`/`zhCN` 对齐。
+
+### P1 — 视觉设计地基（3~5 天）✅ 已完成（2026-07-04）
+
+5. ✅ 建立唯一色源：新增 `src/theme.ts`（`colorPrimary:#4483ed` + `cssVar`），`ConfigProvider` 注入；`index.css` 用 `@theme inline` 把 Tailwind 的 `primary/success/warning/error/text-*` 等工具类映射到 antd 输出的 `--ant-color-*` 变量。全仓替换"三种蓝"（app-drawer/top-navigation/app-detail-header/manage/apps/user/admin-service-status 等的 `blue-600/500` → `primary`）与硬编码语义色（bind-package/daily-check-quota/user/audit-logs/main-layout/login/register 的 hex → token 或语义类）。配额三态颜色抽成 `getCheckQuotaColors` helper（消除三处重复）。删除按钮从 `primary+danger+Filled` 降级为普通 `danger+Outlined`。（§1.1、§1.2、§1.8）
+6. ✅ 补齐幽灵类：在 `index.css` 定义 `.page-section`（max-width 1280 + 居中），修复 8 处页面容器无最大宽度约束的问题；新增 `PageContainer` 组件供后续采用；统一标题层级（apps 的 `level=3`、audit-logs 的原生 `<h2>` → `level=4`，与 admin 页面对齐）。（§1.4、§1.5）
+7. ✅ i18n 化硬编码中文：request/auth（错误/登录提示）、notice（重构为显式 `showNotices()`，消除 import 副作用 + 全文 i18n）、hooks（`useUserInfo` 的到期/剩余天数/定制版，日期格式改 locale-aware）、bind-package（`新增/移除/版本变更` 枚举改英文 + 显示层 `t()`）、admin-users（次/个单位）、apps（key_pending）。默认语言保持中文（`fallbackLng: 'zh-CN'`，antd 兜底 `zhCN`）。（§3.2）
+
+> AuthLayout 与 EmptyState/Skeleton 未强制落地：现有各页布局差异较大，强行统一风险高于收益，留待按页迭代；`PageContainer` 已就绪，新页面可直接采用。
+
+### P2 — 架构收敛（持续）
+
+8. service 层去缓存副作用，manage 系列改 `useMutation`（带 loading/onError/回滚）；query key 全部收进 `query-keys.ts`（§2.1）。
+9. 拆分 user.tsx / admin-service-status.tsx / top-navigation.tsx 等超大组件；version-table/package-list 的闭包编辑改受控 Form（§2.2）。
+10. 删除 `globals.d.ts` 全局 ambient 类型，收敛 any/断言；补 request.ts 与 router loader 测试（§2.4、§2.5）。
+
+### P3 — 锦上添花
+
+11. 暗色模式（依赖 P1 的 token 地基）（§1.3）。
+12. charts / jsoneditor 按需加载、staleTime 调优、xlsx 替换（§4.2、§4.3）。
+13. token 迁出 localStorage 的方案评估（§2.3）。
diff --git a/package.json b/package.json
index a91aef5..5c36f2e 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,10 @@
     "build": "NODE_ENV=production rsbuild build",
     "preview": "rsbuild preview",
     "typecheck": "tsgo --noEmit -p tsconfig.json",
-    "lint": "tsgo --noEmit -p tsconfig.json && biome check --write ."
+    "test": "bun test",
+    "lint": "biome check .",
+    "lint:fix": "tsgo --noEmit -p tsconfig.json && biome check --write .",
+    "ci": "bun run typecheck && bun run lint && bun run test"
   },
   "dependencies": {
     "@ant-design/charts": "^2.6.7",
@@ -21,6 +24,7 @@
     "git-url-parse": "^16.1.0",
     "hash-wasm": "^4.12.0",
     "history": "^5.3.0",
+    "i18next": "^26.3.4",
     "i18next-browser-languagedetector": "^8.2.1",
     "json-diff-kit": "^1.0.35",
     "react": "^19.2.7",
diff --git a/src/components/app-detail-header.tsx b/src/components/app-detail-header.tsx
index e58237b..b86efb5 100644
--- a/src/components/app-detail-header.tsx
+++ b/src/components/app-detail-header.tsx
@@ -120,9 +120,9 @@ function AppDetailTab({
     <button
       aria-selected={active}
       className={cn(
-        'flex min-h-12 flex-1 items-center justify-center gap-2 rounded-lg border border-slate-200 bg-white px-6 py-3 font-medium text-base text-slate-700 shadow-sm transition-colors hover:border-blue-300 hover:text-blue-600 md:min-w-36 md:flex-none',
+        'flex min-h-12 flex-1 items-center justify-center gap-2 rounded-lg border border-slate-200 bg-white px-6 py-3 font-medium text-base text-slate-700 shadow-sm transition-colors hover:border-blue-300 hover:text-primary md:min-w-36 md:flex-none',
         active
-          ? 'border-blue-600! bg-blue-600! text-white! shadow-none hover:border-blue-600! hover:bg-blue-600! hover:text-white!'
+          ? 'border-primary! bg-primary! text-white! shadow-none hover:border-primary! hover:bg-primary! hover:text-white!'
           : undefined,
         disabled
           ? 'cursor-not-allowed border-slate-200 bg-slate-50 text-slate-300 shadow-none hover:border-slate-200 hover:bg-slate-50 hover:text-slate-300'
diff --git a/src/components/app-drawer.tsx b/src/components/app-drawer.tsx
index 7e042dd..9262373 100644
--- a/src/components/app-drawer.tsx
+++ b/src/components/app-drawer.tsx
@@ -349,7 +349,7 @@ function AppIconButton({
     <button
       className={cn(
         'flex h-11 w-11 shrink-0 cursor-pointer items-center justify-center rounded-xl border-0 bg-transparent transition-colors hover:bg-slate-100',
-        isActive ? 'bg-blue-600 text-white hover:bg-blue-600' : undefined,
+        isActive ? 'bg-primary text-white hover:bg-primary' : undefined,
       )}
       onClick={() => onSelect(app)}
       title={`${app.name} · ${formatCheckCount(app, t)}`}
@@ -381,7 +381,7 @@ function AppDrawerRow({
       )}
     >
       {isActive && (
-        <span className="absolute top-1/2 left-2 h-2 w-2 -translate-y-1/2 rounded-full bg-blue-600" />
+        <span className="absolute top-1/2 left-2 h-2 w-2 -translate-y-1/2 rounded-full bg-primary" />
       )}
       <button
         className="flex min-w-0 flex-1 cursor-pointer items-center gap-3 border-0 bg-transparent py-2.5 pr-2 pl-5 text-left text-inherit"
@@ -419,8 +419,8 @@ function AppDrawerRow({
         <button
           aria-label={t('app_drawer.open_app_settings', { name: app.name })}
           className={cn(
-            'mr-2 flex h-8 w-8 shrink-0 cursor-pointer items-center justify-center rounded-md border-0 bg-transparent text-slate-400 opacity-0 transition-all hover:bg-white/80 hover:text-blue-600 hover:opacity-100 focus-visible:opacity-100 group-hover:opacity-100',
-            isActive ? 'text-blue-600 hover:bg-blue-50' : undefined,
+            'mr-2 flex h-8 w-8 shrink-0 cursor-pointer items-center justify-center rounded-md border-0 bg-transparent text-slate-400 opacity-0 transition-all hover:bg-white/80 hover:text-primary hover:opacity-100 focus-visible:opacity-100 group-hover:opacity-100',
+            isActive ? 'text-primary hover:bg-blue-50' : undefined,
           )}
           onClick={() => onSettings(app)}
           title={t('app_drawer.app_settings')}
diff --git a/src/components/app-settings-modal.tsx b/src/components/app-settings-modal.tsx
index e6b8cae..b358f2a 100644
--- a/src/components/app-settings-modal.tsx
+++ b/src/components/app-settings-modal.tsx
@@ -1,4 +1,4 @@
-import { DeleteFilled } from '@ant-design/icons';
+import { DeleteOutlined } from '@ant-design/icons';
 import { useQuery } from '@tanstack/react-query';
 import {
   Button,
@@ -17,6 +17,7 @@ import { rootRouterPath, router } from '@/router';
 import { api } from '@/services/api';
 import type { App } from '@/types';
 import { useUserInfo } from '@/utils/hooks';
+import { appKeys } from '@/utils/query-keys';
 
 export interface AppSettingsTarget {
   id: number;
@@ -83,7 +84,7 @@ function AppSettingsModalContent({
   const { t } = useTranslation();
   const { user } = useUserInfo();
   const { data: app, isLoading } = useQuery({
-    queryKey: ['app', appId],
+    queryKey: appKeys.detail(appId),
     queryFn: () => api.getApp(appId),
   });
   const appKey = Form.useWatch('appKey', form) as string;
@@ -162,8 +163,7 @@ function AppSettingsModalContent({
         </Form.Item>
         <Form.Item label={t('app_settings_modal.delete_app')} layout="vertical">
           <Button
-            type="primary"
-            icon={<DeleteFilled />}
+            icon={<DeleteOutlined />}
             onClick={() => {
               Modal.confirm({
                 title: t('app_settings_modal.delete_confirm'),
diff --git a/src/components/daily-check-quota.tsx b/src/components/daily-check-quota.tsx
index f143a19..a3a120f 100644
--- a/src/components/daily-check-quota.tsx
+++ b/src/components/daily-check-quota.tsx
@@ -1,12 +1,13 @@
 import { WarningOutlined } from '@ant-design/icons';
 import { Alert, Progress, Tag, Tooltip, Typography } from 'antd';
-import dayjs from 'dayjs';
 import { useTranslation } from 'react-i18next';
 import { quotas } from '@/constants/quotas';
 import {
   CHECK_QUOTA_LOW_RATIO,
+  getCheckQuotaColors,
   getCheckQuotaWarningState,
 } from '@/utils/check-quota-warning';
+import dayjs from '@/utils/dayjs';
 import { cn } from '@/utils/helper';
 import { useUserInfo } from '@/utils/hooks';
 
@@ -106,11 +107,7 @@ export function DailyCheckQuotaUserTrigger({
   const { t } = useTranslation();
   const quotaState = useDailyCheckQuotaState();
   const { user } = quotaState;
-  const strokeColor = quotaState.isExceeded
-    ? '#ef4444'
-    : quotaState.isLow
-      ? '#f59e0b'
-      : '#2563eb';
+  const quotaColors = getCheckQuotaColors(quotaState.level);
   const tierTitle = user ? getTierTitle(user.tier, user.quota?.title, t) : '';
   const expireLabel = user?.tierExpiresAt
     ? t('daily_check_quota.expire_date', {
@@ -151,14 +148,8 @@ export function DailyCheckQuotaUserTrigger({
       showInfo={false}
       size="small"
       status={quotaState.progressStatus}
-      strokeColor={strokeColor}
-      trailColor={
-        quotaState.isExceeded
-          ? '#fecaca'
-          : quotaState.isLow
-            ? '#fde68a'
-            : '#e5e7eb'
-      }
+      strokeColor={quotaColors.stroke}
+      trailColor={quotaColors.trail}
     />
   );
   const content = compact ? (
@@ -259,11 +250,7 @@ export default function DailyCheckQuota(_props: DailyCheckQuotaProps) {
         : quotaState.isLow
           ? t('daily_check_quota.status_low')
           : t('daily_check_quota.status_healthy');
-  const progressStrokeColor = quotaState.isExceeded
-    ? '#ef4444'
-    : quotaState.isLow
-      ? '#f59e0b'
-      : '#2563eb';
+  const progressColors = getCheckQuotaColors(quotaState.level);
 
   return (
     <div className="space-y-3">
@@ -343,15 +330,9 @@ export default function DailyCheckQuota(_props: DailyCheckQuotaProps) {
             percent={quotaState.percent}
             showInfo={false}
             status={quotaState.progressStatus}
-            strokeColor={progressStrokeColor}
+            strokeColor={progressColors.stroke}
             strokeLinecap="round"
-            trailColor={
-              quotaState.isExceeded
-                ? '#fecaca'
-                : quotaState.isLow
-                  ? '#fde68a'
-                  : undefined
-            }
+            trailColor={quotaState.isWarning ? progressColors.trail : undefined}
           />
         </Tooltip>
         <div className="mt-2 text-gray-500 text-xs">
diff --git a/src/components/index.ts b/src/components/index.ts
index 2ebe0c9..77a78c3 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1,2 +1,3 @@
 export { ErrorBoundary } from './error-boundary';
 export { default as Footer } from './footer';
+export { PageContainer } from './page-container';
diff --git a/src/components/main-layout.tsx b/src/components/main-layout.tsx
index 8b7bcf3..05da379 100644
--- a/src/components/main-layout.tsx
+++ b/src/components/main-layout.tsx
@@ -54,13 +54,13 @@ export default MainLayout;
 
 const style: Style = {
   header: {
-    background: '#fff',
+    background: 'var(--ant-color-bg-container)',
     minHeight: 64,
     height: 'auto',
     lineHeight: 'normal',
     display: 'flex',
     alignItems: 'center',
-    borderBottom: '1px solid #e5e7eb',
+    borderBottom: '1px solid var(--ant-color-border-secondary)',
     boxShadow: 'none',
     zIndex: 10,
   },
diff --git a/src/components/page-container.tsx b/src/components/page-container.tsx
new file mode 100644
index 0000000..74a9d38
--- /dev/null
+++ b/src/components/page-container.tsx
@@ -0,0 +1,53 @@
+import { Typography } from 'antd';
+import type { ReactNode } from 'react';
+import { cn } from '@/utils/helper';
+
+const { Title } = Typography;
+
+interface PageContainerProps {
+  /** 页面主标题，统一使用 level 4。 */
+  title?: ReactNode;
+  /** 标题下方的辅助说明文字。 */
+  description?: ReactNode;
+  /** 标题行右侧的操作区（搜索框、按钮等）。 */
+  extra?: ReactNode;
+  className?: string;
+  children: ReactNode;
+}
+
+/**
+ * 页面级容器：统一最大宽度、水平居中与标题层级。
+ * 替代此前散落在各页面、且无 CSS 定义的 `page-section` 幽灵类，
+ * 并统一 admin/apps 等页面参差不齐的标题层级（level 3/4/5 混用）。
+ */
+export function PageContainer({
+  title,
+  description,
+  extra,
+  className,
+  children,
+}: PageContainerProps) {
+  const hasHeader = title || description || extra;
+  return (
+    <div className={cn('page-section', className)}>
+      {hasHeader && (
+        <div className="mb-4 flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
+          <div>
+            {title && (
+              <Title level={4} className="m-0!">
+                {title}
+              </Title>
+            )}
+            {description && (
+              <div className="text-sm text-text-secondary">{description}</div>
+            )}
+          </div>
+          {extra}
+        </div>
+      )}
+      {children}
+    </div>
+  );
+}
+
+export default PageContainer;
diff --git a/src/components/top-navigation.tsx b/src/components/top-navigation.tsx
index 308849a..c0bb81e 100644
--- a/src/components/top-navigation.tsx
+++ b/src/components/top-navigation.tsx
@@ -352,7 +352,7 @@ export default function TopNavigation({
           <button
             aria-label={t('nav.open_menu')}
             className={cn(
-              'flex h-10 w-10 shrink-0 items-center justify-center rounded-xl border-0 bg-blue-600 text-white shadow-sm transition-colors hover:bg-blue-500',
+              'flex h-10 w-10 shrink-0 items-center justify-center rounded-xl border-0 bg-primary text-white shadow-sm transition-colors hover:bg-primary-hover',
               showAuthenticatedChrome && user ? undefined : 'ml-auto',
             )}
             onClick={() => setMobileMenuOpen(true)}
@@ -687,9 +687,9 @@ function AppSwitcherContent({
             {recentApps.map((app) => (
               <button
                 className={cn(
-                  'inline-flex max-w-[180px] cursor-pointer items-center gap-1.5 rounded-full border border-gray-200 bg-gray-50 px-2 py-1 text-gray-600 text-xs transition-colors hover:border-blue-300 hover:bg-blue-50 hover:text-blue-600',
+                  'inline-flex max-w-[180px] cursor-pointer items-center gap-1.5 rounded-full border border-gray-200 bg-gray-50 px-2 py-1 text-gray-600 text-xs transition-colors hover:border-blue-300 hover:bg-blue-50 hover:text-primary',
                   app.id === currentAppId
-                    ? 'border-blue-200 bg-blue-50 text-blue-600'
+                    ? 'border-blue-200 bg-blue-50 text-primary'
                     : undefined,
                 )}
                 key={app.id}
@@ -833,7 +833,7 @@ function AppRow({
       </button>
       <button
         aria-label={t('nav.open_app_settings', { name: app.name })}
-        className="mr-2 flex h-8 w-8 shrink-0 cursor-pointer items-center justify-center rounded-md border-0 bg-transparent text-slate-400 transition-colors hover:bg-white hover:text-blue-600"
+        className="mr-2 flex h-8 w-8 shrink-0 cursor-pointer items-center justify-center rounded-md border-0 bg-transparent text-slate-400 transition-colors hover:bg-white hover:text-primary"
         onClick={() => onSettings(app)}
         title={t('nav.app_settings')}
         type="button"
diff --git a/src/globals.d.ts b/src/globals.d.ts
index 02316ca..09807a6 100644
--- a/src/globals.d.ts
+++ b/src/globals.d.ts
@@ -26,11 +26,13 @@ declare module 'bun:test' {
   type ExpectAssertions = {
     toBe(expected: unknown): void;
     toBeGreaterThan(expected: number): void;
+    toBeInstanceOf(expected: unknown): void;
     toBeNull(): void;
     toContain(expected: unknown): void;
     toEqual(expected: unknown): void;
     toHaveBeenCalledWith(...args: unknown[]): void;
     toHaveBeenCalled(): void;
+    toHaveBeenCalledTimes(expected: number): void;
     toHaveLength(expected: number): void;
     toThrow(expected?: unknown): void;
   };
@@ -49,28 +51,9 @@ declare module 'bun:test' {
   export function setSystemTime(time: Date | number | null): void;
   export const mock: {
     module(path: string, factory: () => any): void;
+    restore(): void;
     <T extends (...args: any[]) => any>(
       fn?: T,
     ): T & { mockClear(): void; mockImplementationOnce(fn: T): void };
   };
 }
-
-type Tier = import('./types').Tier;
-
-type User = import('./types').User;
-type AdminUser = import('./types').AdminUser;
-type AdminApp = import('./types').AdminApp;
-type AdminVersion = import('./types').AdminVersion;
-type Quota = import('./types').Quota;
-type App = import('./types').App;
-type PackageBase = import('./types').PackageBase;
-type Package = import('./types').Package;
-type Commit = import('./types').Commit;
-type Version = import('./types').Version;
-type AppDetail = import('./types').AppDetail;
-type ContentProps = import('./types').ContentProps;
-type VersionConfig = import('./types').VersionConfig;
-type BindingType = import('./types').BindingType;
-type Binding = import('./types').Binding;
-type AuditLog = import('./types').AuditLog;
-type ApiToken = import('./types').ApiToken;
diff --git a/src/i18n/index.ts b/src/i18n/index.ts
index ff410df..a35b2af 100644
--- a/src/i18n/index.ts
+++ b/src/i18n/index.ts
@@ -12,7 +12,7 @@ i18n
       en: { translation: en },
       'zh-CN': { translation: zhCN },
     },
-    fallbackLng: 'en',
+    fallbackLng: 'zh-CN',
     interpolation: {
       escapeValue: false,
     },
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index be4c712..449e133 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -1,11 +1,28 @@
 {
+  "notice": {
+    "v8_deprecation_title": "Notice: react-native-update will drop support for versions below v8",
+    "v8_deprecation_p1_before": "Starting ",
+    "v8_deprecation_date": "August 10, 2025",
+    "v8_deprecation_p1_after": ", native and OTA packages below v8 can no longer be uploaded. Please upgrade to v8 or later as soon as possible. Already-uploaded versions are unaffected.",
+    "v8_deprecation_p2": "Major version upgrades require rebuilding the native package — please test thoroughly.",
+    "v8_deprecation_p3": "Code for v5–v9 is largely compatible; v10 is not compatible with earlier versions.",
+    "v8_deprecation_p4": "For upgrade-related technical questions, please ask in the QQ group 729013783.",
+    "ok": "Got it",
+    "dont_show_again": "Don't show again"
+  },
   "login": {
     "slogan": "Lightning-fast OTA Framework for React Native",
     "email_placeholder": "Email",
     "password_placeholder": "Password",
     "login_button": "Log in",
     "register": "Sign up",
-    "forgot_password": "Forgot password?"
+    "forgot_password": "Forgot password?",
+    "success": "Logged in",
+    "failed": "Login failed"
+  },
+  "request": {
+    "error": "Error: {{message}}",
+    "proxy_hint": "If you are using a proxy, please disable it and try again"
   },
   "register": {
     "slogan": "Lightning-fast OTA Framework for React Native",
@@ -84,6 +101,7 @@
     "service_version": "Plan",
     "service_expire": "Expires",
     "no_expire": "None",
+    "remaining_note": "({{days}} days left, then reverts to Free)",
     "purchase_note": "Purchase Notes",
     "quota_details": "Quota Details",
     "view_pricing": "View Pricing",
@@ -248,6 +266,9 @@
     "col_status": "Status",
     "col_payload": "Payload",
     "col_device": "Device",
+    "col_browser": "Browser",
+    "col_os": "OS",
+    "col_ip_addr": "IP Address",
     "col_details": "Details",
     "view": "View",
     "title": "Audit Logs",
@@ -405,6 +426,23 @@
     "col_tier_expires": "Tier Expires",
     "col_custom_quota": "Custom Quota",
     "col_actions": "Actions",
+    "col_note": "Note",
+    "detail_title": "User Details",
+    "basic_info": "Basic Info",
+    "quota_usage": "Quota & Usage",
+    "pv_limit": "Daily Update Check Limit",
+    "today_used": "Used Today",
+    "today_remaining": "Remaining Today",
+    "avg_7_days": "7-Day Daily Average",
+    "last_7_days_details": "Last 7 Days",
+    "day_label": "Day {{day}}",
+    "app_limit": "App Limit",
+    "package_limit": "Packages per App Limit",
+    "apps_and_packages": "Apps & Packages",
+    "packages_count": "Packages",
+    "pkg_name": "Name / Version",
+    "checks_value": "{{value}}",
+    "packages_value": "{{value}}",
     "status_normal": "Normal",
     "status_unverified": "Unverified",
     "has_quota": "Yes",
@@ -732,7 +770,8 @@
     "yes": "Yes",
     "no": "No",
     "loading": "Loading...",
-    "copied": "Copied"
+    "copied": "Copied",
+    "search": "Search"
   },
   "publish_feature_table": {
     "version_header_line1": "react-native-update Version",
diff --git a/src/i18n/locales/zh-CN.json b/src/i18n/locales/zh-CN.json
index 77b6dae..37c1ded 100644
--- a/src/i18n/locales/zh-CN.json
+++ b/src/i18n/locales/zh-CN.json
@@ -1,11 +1,28 @@
 {
+  "notice": {
+    "v8_deprecation_title": "通知：react-native-update 即将停止支持 v8 以下版本",
+    "v8_deprecation_p1_before": "从",
+    "v8_deprecation_date": "2025年8月10日",
+    "v8_deprecation_p1_after": "起低于 v8 版本的原生包和热更包将无法上传，请尽快升级到 v8 及以上版本。已上传的版本不受影响。",
+    "v8_deprecation_p2": "跨大版本更新时需要重新打原生包，并请充分测试。",
+    "v8_deprecation_p3": "v5 - v9 版本代码基本兼容，v10 版本代码与之前版本不兼容。",
+    "v8_deprecation_p4": "升级相关的技术问题，请在 QQ 群 729013783 中咨询技术支持。",
+    "ok": "我知道了",
+    "dont_show_again": "不再显示"
+  },
   "login": {
     "slogan": "极速热更新框架 for React Native",
     "email_placeholder": "邮箱",
     "password_placeholder": "密码",
     "login_button": "登录",
     "register": "注册",
-    "forgot_password": "忘记密码？"
+    "forgot_password": "忘记密码？",
+    "success": "登录成功",
+    "failed": "登录失败"
+  },
+  "request": {
+    "error": "错误：{{message}}",
+    "proxy_hint": "如有使用代理，请关闭代理后重试"
   },
   "register": {
     "slogan": "极速热更新框架 for React Native",
@@ -84,6 +101,7 @@
     "service_version": "服务版本",
     "service_expire": "服务有效期至",
     "no_expire": "无",
+    "remaining_note": "(剩余 {{days}} 天，之后转为免费版)",
     "purchase_note": "购买说明",
     "quota_details": "额度详情",
     "view_pricing": "查看价格表",
@@ -248,6 +266,9 @@
     "col_status": "状态码",
     "col_payload": "提交数据",
     "col_device": "设备信息",
+    "col_browser": "浏览器",
+    "col_os": "操作系统",
+    "col_ip_addr": "IP 地址",
     "col_details": "详情",
     "view": "查看",
     "title": "操作日志",
@@ -405,6 +426,23 @@
     "col_tier_expires": "套餐过期时间",
     "col_custom_quota": "自定义配额",
     "col_actions": "操作",
+    "col_note": "备注",
+    "detail_title": "用户详细信息",
+    "basic_info": "基本信息",
+    "quota_usage": "配额与用量",
+    "pv_limit": "每日更新检查上限",
+    "today_used": "今日已用",
+    "today_remaining": "今日剩余",
+    "avg_7_days": "近 7 天日均",
+    "last_7_days_details": "近 7 天明细",
+    "day_label": "第 {{day}} 天",
+    "app_limit": "应用数量上限",
+    "package_limit": "单应用原生包上限",
+    "apps_and_packages": "应用与原生包",
+    "packages_count": "原生包数",
+    "pkg_name": "包名 / 版本",
+    "checks_value": "{{value}} 次",
+    "packages_value": "{{value}} 个",
     "status_normal": "正常",
     "status_unverified": "未验证",
     "has_quota": "有",
@@ -618,7 +656,7 @@
   "manage": {
     "filter_all": "全部",
     "filter_unused": "未使用",
-    "tab_versions": "OTA 版本",
+    "tab_versions": "热更包",
     "tab_packages": "原生包",
     "loading_app": "加载应用",
     "breadcrumb_apps": "应用",
@@ -638,21 +676,21 @@
     "deep_link_required": "请输入 App 已注册的 URL Scheme，例如 pushy://",
     "deep_link_hint": "填 App 原生注册的 URL Scheme，只填前缀，不填路径或参数。",
     "deep_link_example": "生成示例：{{link}}?type=...",
-    "delete_title": "删除选中的 OTA 版本：",
+    "delete_title": "删除所选热更包：",
     "col_version": "版本",
     "col_description": "描述",
     "col_metadata": "元数据",
     "col_publish": "发布到原生包",
     "col_publish_info": "(功能说明)",
     "col_uploaded": "上传时间",
-    "title": "OTA 版本",
+    "title": "热更包",
     "total_versions": "共 {{total}} 个版本",
     "delete_button": "删除"
   },
   "deps_table": {
     "js_deps_title": "JavaScript 依赖",
     "native_packages": "原生包",
-    "ota_versions": "OTA 版本",
+    "ota_versions": "热更包",
     "loading": "加载中...",
     "compare": "对比",
     "back": "返回",
@@ -692,8 +730,8 @@
   },
   "bind_package": {
     "target_package": "目标原生包：",
-    "ota_version": "OTA 版本：",
-    "native_warning": "纯 JavaScript 依赖的变更通常是安全的。如果任何变更的依赖包含<strong>原生代码</strong>，OTA 更新可能导致功能问题甚至崩溃。请仔细审查，并在发布到生产环境前进行完整的二维码测试。",
+    "ota_version": "热更包：",
+    "native_warning": "纯 JavaScript 依赖的变更通常是安全的。如果任何变更的依赖包含<strong>原生代码</strong>，热更可能导致功能不正常甚至闪退。请仔细审查，并在发布到生产环境前进行完整的二维码测试。",
     "col_version_change": "版本变更",
     "change_added": "新增",
     "change_removed": "移除",
@@ -732,7 +770,8 @@
     "yes": "是",
     "no": "否",
     "loading": "加载中...",
-    "copied": "已复制"
+    "copied": "已复制",
+    "search": "搜索"
   },
   "language": {
     "switch": "语言",
diff --git a/src/index.css b/src/index.css
index f45fd0d..d208334 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,5 +1,24 @@
 @import "tailwindcss";
 
+/*
+ * 让 Tailwind 的颜色工具类（text-primary / bg-primary / border-error ...）
+ * 直接消费 antd（cssVar 模式）输出的 CSS 变量，实现全站唯一色源。
+ * antd 的变量在运行时注入到 :root，这里只做别名映射。
+ */
+@theme inline {
+  --color-primary: var(--ant-color-primary);
+  --color-primary-hover: var(--ant-color-primary-hover);
+  --color-primary-active: var(--ant-color-primary-active);
+  --color-success: var(--ant-color-success);
+  --color-warning: var(--ant-color-warning);
+  --color-error: var(--ant-color-error);
+  --color-info: var(--ant-color-info);
+  --color-text: var(--ant-color-text);
+  --color-text-secondary: var(--ant-color-text-secondary);
+  --color-text-tertiary: var(--ant-color-text-tertiary);
+  --color-border: var(--ant-color-border);
+}
+
 html,
 body {
   height: 100%;
@@ -13,6 +32,17 @@ a:hover {
   text-decoration: none;
 }
 
+/*
+ * 页面级容器：统一最大宽度与水平居中，避免超宽屏下内容拉满。
+ * 之前该类被 8 处页面引用却无定义（幽灵类），页面留白只靠
+ * .ant-layout-content 的 padding，缺少统一的最大宽度约束。
+ */
+.page-section {
+  width: 100%;
+  max-width: 1280px;
+  margin-inline: auto;
+}
+
 .ant-layout-content {
   padding: 24px;
 }
@@ -38,7 +68,7 @@ a:hover {
 
 .body {
   padding: 16px;
-  background: #fff;
+  background: var(--ant-color-bg-container);
 }
 
 a.ant-typography .ant-typography {
@@ -46,7 +76,7 @@ a.ant-typography .ant-typography {
 }
 
 a.ant-typography:hover .ant-typography {
-  color: #40a9ff;
+  color: var(--ant-color-primary-hover);
 }
 
 [draggable] {
diff --git a/src/index.tsx b/src/index.tsx
index 4816729..6668117 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -2,14 +2,18 @@ import { ConfigProvider } from 'antd';
 import enUS from 'antd/locale/en_US';
 import zhCN from 'antd/locale/zh_CN';
 import { createRoot } from 'react-dom/client';
+import { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { RouterProvider } from 'react-router-dom';
 
 import './index.css';
 import './i18n';
+import './utils/dayjs';
 import { QueryClientProvider } from '@tanstack/react-query';
 import { router } from './router';
+import { themeConfig } from './theme';
 import { queryClient } from './utils/queryClient';
+import { showNotices } from './utils/notice';
 
 const antdLocaleMap: Record<string, typeof zhCN> = {
   en: enUS,
@@ -70,8 +74,12 @@ function App() {
   const language = i18n.resolvedLanguage ?? i18n.language;
   const antdLocale = antdLocaleMap[language] ?? zhCN;
 
+  useEffect(() => {
+    showNotices();
+  }, []);
+
   return (
-    <ConfigProvider locale={antdLocale}>
+    <ConfigProvider locale={antdLocale} theme={themeConfig}>
       <QueryClientProvider client={queryClient}>
         <RouterProvider router={router} />
       </QueryClientProvider>
diff --git a/src/pages/activate.tsx b/src/pages/activate.tsx
index 85ccbf2..ae834ca 100644
--- a/src/pages/activate.tsx
+++ b/src/pages/activate.tsx
@@ -5,13 +5,14 @@ import { useTranslation } from 'react-i18next';
 import { Link, useLocation } from 'react-router-dom';
 import { rootRouterPath } from '@/router';
 import { api } from '@/services/api';
+import { activateKeys } from '@/utils/query-keys';
 
 export const Activate = () => {
   const { t } = useTranslation();
   const { search } = useLocation();
   const token = new URLSearchParams(search).get('code') || '';
   const { isLoading, error } = useQuery({
-    queryKey: ['activate', token],
+    queryKey: activateKeys.byToken(token),
     queryFn: () => api.activate({ token }),
     enabled: !!token,
   });
diff --git a/src/pages/admin-apps.tsx b/src/pages/admin-apps.tsx
index 1a483c6..375a563 100644
--- a/src/pages/admin-apps.tsx
+++ b/src/pages/admin-apps.tsx
@@ -27,7 +27,9 @@ import { useTranslation } from 'react-i18next';
 import { Link, useSearchParams } from 'react-router-dom';
 import { rootRouterPath } from '@/router';
 import { adminApi } from '@/services/admin-api';
+import type { AdminApp } from '@/types';
 import { patchSearchParams } from '@/utils/helper';
+import { adminKeys } from '@/utils/query-keys';
 
 const { Title } = Typography;
 
@@ -77,7 +79,7 @@ export const Component = () => {
   }, [searchKeyword, searchQuery, setSearchParams]);
 
   const { data, isLoading } = useQuery({
-    queryKey: ['adminApps', searchQuery, currentPage, pageSize],
+    queryKey: adminKeys.apps(searchQuery, currentPage, pageSize),
     queryFn: () =>
       adminApi.searchApps({
         search: searchQuery || undefined,
@@ -101,7 +103,7 @@ export const Component = () => {
     onSuccess: () => {
       message.success(t('admin_apps.app_updated'));
       setIsModalOpen(false);
-      queryClient.invalidateQueries({ queryKey: ['adminApps'] });
+      queryClient.invalidateQueries({ queryKey: adminKeys.apps() });
     },
     onError: (error) => {
       message.error((error as Error).message);
diff --git a/src/pages/admin-config.tsx b/src/pages/admin-config.tsx
index 51aebe4..773ed18 100644
--- a/src/pages/admin-config.tsx
+++ b/src/pages/admin-config.tsx
@@ -24,6 +24,7 @@ import {
   type OnChange,
 } from 'vanilla-jsoneditor';
 import { adminApi } from '@/services/admin-api';
+import { adminKeys } from '@/utils/query-keys';
 
 const { Title } = Typography;
 
@@ -100,7 +101,7 @@ export const Component = () => {
   const [jsonValue, setJsonValue] = useState('');
 
   const { data, isLoading, refetch } = useQuery({
-    queryKey: ['adminConfig'],
+    queryKey: adminKeys.config(),
     queryFn: () => adminApi.getConfig(),
   });
 
@@ -145,7 +146,7 @@ export const Component = () => {
       await adminApi.setConfig(key, compactValue);
       message.success(t('admin_config.saved'));
       setIsModalOpen(false);
-      queryClient.invalidateQueries({ queryKey: ['adminConfig'] });
+      queryClient.invalidateQueries({ queryKey: adminKeys.config() });
     } catch (error) {
       message.error((error as Error).message);
     }
diff --git a/src/pages/admin-metrics.tsx b/src/pages/admin-metrics.tsx
index 1d145c0..64e338e 100644
--- a/src/pages/admin-metrics.tsx
+++ b/src/pages/admin-metrics.tsx
@@ -16,6 +16,7 @@ import { useTranslation } from 'react-i18next';
 import { useSearchParams } from 'react-router-dom';
 import { api } from '@/services/api';
 import { patchSearchParams } from '@/utils/helper';
+import { metricsKeys } from '@/utils/query-keys';
 
 const { Title } = Typography;
 const { RangePicker } = DatePicker;
@@ -145,7 +146,7 @@ export const Component = () => {
   const modeLabels = getModeLabels(t);
 
   const { data: pvMetrics, isLoading: isLoadingPv } = useQuery({
-    queryKey: ['globalMetrics', startDate, endDate, 'pv'],
+    queryKey: metricsKeys.global(startDate, endDate, 'pv'),
     queryFn: () =>
       api.getGlobalMetrics({
         start: startDate,
@@ -155,7 +156,7 @@ export const Component = () => {
   });
 
   const { data: uvMetrics, isLoading: isLoadingUv } = useQuery({
-    queryKey: ['globalMetrics', startDate, endDate, 'uv'],
+    queryKey: metricsKeys.global(startDate, endDate, 'uv'),
     queryFn: () =>
       api.getGlobalMetrics({
         start: startDate,
diff --git a/src/pages/admin-service-status.tsx b/src/pages/admin-service-status.tsx
index dc98a2b..091339c 100644
--- a/src/pages/admin-service-status.tsx
+++ b/src/pages/admin-service-status.tsx
@@ -24,6 +24,7 @@ import {
   type InternalMetricsResponse,
 } from '@/services/api';
 import { cn } from '@/utils/helper';
+import { metricsKeys } from '@/utils/query-keys';
 
 const { Paragraph, Text, Title } = Typography;
 
@@ -649,7 +650,7 @@ function ServiceStatusPanel({
         offset: api5xxEventOffset,
         suppressErrorToast: true,
       }),
-    queryKey: ['internalApi5xxEvents', target.key, api5xxEventOffset],
+    queryKey: metricsKeys.internalApi5xxEvents(target.key, api5xxEventOffset),
     refetchInterval: 30_000,
   });
   const apiDuration = useMemo(
@@ -946,7 +947,7 @@ function ServiceTargetSidebar({
               className={cn(
                 'w-full cursor-pointer rounded-lg border bg-white p-3 text-left shadow-sm transition-all hover:border-blue-300 hover:shadow-md',
                 isActive
-                  ? 'border-blue-500 bg-blue-50 shadow-none'
+                  ? 'border-primary bg-blue-50 shadow-none'
                   : 'border-slate-200',
               )}
               key={target.key}
@@ -957,7 +958,7 @@ function ServiceTargetSidebar({
                 <span
                   className={cn(
                     'shrink-0 font-semibold text-base',
-                    isActive ? 'text-blue-700' : 'text-slate-900',
+                    isActive ? 'text-primary' : 'text-slate-900',
                   )}
                 >
                   {target.label}
@@ -1025,7 +1026,7 @@ export const Component = () => {
           baseUrl: target.baseUrl,
           suppressErrorToast: true,
         }),
-      queryKey: ['internalMetrics', target.key],
+      queryKey: metricsKeys.internal(target.key),
       refetchInterval: 30_000,
     })),
   });
diff --git a/src/pages/admin-users.tsx b/src/pages/admin-users.tsx
index ea3e60c..3e0392d 100644
--- a/src/pages/admin-users.tsx
+++ b/src/pages/admin-users.tsx
@@ -32,8 +32,9 @@ import {
 } from 'vanilla-jsoneditor';
 import { quotas } from '@/constants/quotas';
 import { adminApi } from '@/services/admin-api';
-import type { Tier } from '@/types';
+import type { AdminUser, Quota, Tier } from '@/types';
 import { patchSearchParams } from '@/utils/helper';
+import { adminKeys } from '@/utils/query-keys';
 
 const { Title } = Typography;
 
@@ -125,32 +126,26 @@ const UserDetailDrawer = ({
   open,
   onClose,
   isMobile,
-  t,
 }: {
   userId: number | null;
   open: boolean;
   onClose: () => void;
   isMobile: boolean;
-  t?: (key: string) => string;
 }) => {
+  const { t } = useTranslation();
   const { data, isLoading } = useQuery({
-    queryKey: ['adminUserDetail', userId],
+    queryKey: adminKeys.userDetail(userId),
     queryFn: () => (userId ? adminApi.getUserDetail(userId) : null),
     enabled: !!userId && open,
   });
 
-  const translate = (key: string, fallback: string) => {
-    if (t) {
-      return t(key);
-    }
-    return fallback;
-  };
+  const translate = (key: string) => t(key);
 
   const detail = data;
 
   return (
     <Drawer
-      title={translate('admin_users.detail_title', '用户详细信息')}
+      title={translate('admin_users.detail_title')}
       width={isMobile ? '100%' : 720}
       onClose={onClose}
       open={open}
@@ -160,43 +155,37 @@ const UserDetailDrawer = ({
         {detail && (
           <Space direction="vertical" size="large" className="w-full">
             <Descriptions
-              title={translate('admin_users.basic_info', '基本信息')}
+              title={translate('admin_users.basic_info')}
               bordered
               column={2}
             >
               <Descriptions.Item label="ID">{detail.user.id}</Descriptions.Item>
-              <Descriptions.Item
-                label={translate('admin_users.col_name', '用户名')}
-              >
+              <Descriptions.Item label={translate('admin_users.col_name')}>
                 {detail.user.name}
               </Descriptions.Item>
               <Descriptions.Item
-                label={translate('admin_users.col_email', '邮箱')}
+                label={translate('admin_users.col_email')}
                 span={2}
               >
                 {detail.user.email}
               </Descriptions.Item>
-              <Descriptions.Item
-                label={translate('admin_users.col_status', '状态')}
-              >
+              <Descriptions.Item label={translate('admin_users.col_status')}>
                 <Badge
                   status={
                     detail.user.status === 'normal' ? 'success' : 'warning'
                   }
                   text={
                     detail.user.status === 'normal'
-                      ? translate('admin_users.status_normal', '正常')
-                      : translate('admin_users.status_unverified', '未验证')
+                      ? translate('admin_users.status_normal')
+                      : translate('admin_users.status_unverified')
                   }
                 />
               </Descriptions.Item>
-              <Descriptions.Item
-                label={translate('admin_users.col_tier', '套餐')}
-              >
+              <Descriptions.Item label={translate('admin_users.col_tier')}>
                 {detail.user.tier}
               </Descriptions.Item>
               <Descriptions.Item
-                label={translate('admin_users.col_tier_expires', '过期时间')}
+                label={translate('admin_users.col_tier_expires')}
                 span={2}
               >
                 {detail.user.tierExpiresAt
@@ -206,58 +195,53 @@ const UserDetailDrawer = ({
             </Descriptions>
 
             <Descriptions
-              title={translate('admin_users.quota_usage', '额度与 PV 使用')}
+              title={translate('admin_users.quota_usage')}
               bordered
               column={2}
             >
-              <Descriptions.Item
-                label={translate('admin_users.pv_limit', '每日更新检查上限')}
-              >
-                {detail.quotaDetail.limit.pv} 次
+              <Descriptions.Item label={translate('admin_users.pv_limit')}>
+                {t('admin_users.checks_value', {
+                  value: detail.quotaDetail.limit.pv,
+                })}
               </Descriptions.Item>
-              <Descriptions.Item
-                label={translate('admin_users.today_used', '今日已用')}
-              >
-                {detail.quotaDetail.todayUsed} 次
+              <Descriptions.Item label={translate('admin_users.today_used')}>
+                {t('admin_users.checks_value', {
+                  value: detail.quotaDetail.todayUsed,
+                })}
               </Descriptions.Item>
               <Descriptions.Item
-                label={translate('admin_users.today_remaining', '今日剩余')}
+                label={translate('admin_users.today_remaining')}
               >
-                {detail.quotaDetail.todayRemaining} 次
+                {t('admin_users.checks_value', {
+                  value: detail.quotaDetail.todayRemaining,
+                })}
               </Descriptions.Item>
-              <Descriptions.Item
-                label={translate('admin_users.avg_7_days', '过去 7 天日均')}
-              >
-                {detail.quotaDetail.last7Days.avg} 次
+              <Descriptions.Item label={translate('admin_users.avg_7_days')}>
+                {t('admin_users.checks_value', {
+                  value: detail.quotaDetail.last7Days.avg,
+                })}
               </Descriptions.Item>
               <Descriptions.Item
-                label={translate(
-                  'admin_users.last_7_days_details',
-                  '过去 7 天详情',
-                )}
+                label={translate('admin_users.last_7_days_details')}
                 span={2}
               >
                 {detail.quotaDetail.last7Days.counts
                   .slice()
                   .reverse()
                   .map((c, i) => (
+                    // biome-ignore lint/suspicious/noArrayIndexKey: fixed-length ordered day list, index is the stable identity
                     <span key={i} className="mr-3 inline-block">
-                      Day {i + 1}: <strong>{c}</strong>
+                      {t('admin_users.day_label', { day: i + 1 })}: <strong>{c}</strong>
                     </span>
                   ))}
               </Descriptions.Item>
-              <Descriptions.Item
-                label={translate('admin_users.app_limit', '应用创建限制')}
-              >
+              <Descriptions.Item label={translate('admin_users.app_limit')}>
                 {detail.apps.length} / {detail.quotaDetail.limit.app}
               </Descriptions.Item>
-              <Descriptions.Item
-                label={translate(
-                  'admin_users.package_limit',
-                  '单应用发布包限制',
-                )}
-              >
-                {detail.quotaDetail.limit.package} 个
+              <Descriptions.Item label={translate('admin_users.package_limit')}>
+                {t('admin_users.packages_value', {
+                  value: detail.quotaDetail.limit.package,
+                })}
               </Descriptions.Item>
             </Descriptions>
 
@@ -266,7 +250,7 @@ const UserDetailDrawer = ({
                 className="ant-descriptions-title"
                 style={{ marginBottom: 12 }}
               >
-                {translate('admin_users.apps_and_packages', '应用与原生包')}
+                {translate('admin_users.apps_and_packages')}
               </div>
               <Collapse>
                 {detail.apps.map((app) => (
@@ -282,7 +266,7 @@ const UserDetailDrawer = ({
                             PV: <strong>{app.checkCount}</strong>
                           </span>
                           <span>
-                            {translate('admin_users.packages_count', '发布包')}:{' '}
+                            {translate('admin_users.packages_count')}:{' '}
                             <strong>{app.packagesCount}</strong>
                           </span>
                         </Space>
@@ -306,10 +290,7 @@ const UserDetailDrawer = ({
                             width: 60,
                           },
                           {
-                            title: translate(
-                              'admin_users.pkg_name',
-                              '包名/版本',
-                            ),
+                            title: translate('admin_users.pkg_name'),
                             dataIndex: 'name',
                             key: 'name',
                           },
@@ -329,13 +310,13 @@ const UserDetailDrawer = ({
                               `${r.buildNumber || '-'}(${r.buildTime || '-'})`,
                           },
                           {
-                            title: translate('admin_users.col_status', '状态'),
+                            title: translate('admin_users.col_status'),
                             dataIndex: 'status',
                             key: 'status',
                             width: 80,
                           },
                           {
-                            title: translate('admin_users.col_note', '备注'),
+                            title: translate('admin_users.col_note'),
                             dataIndex: 'note',
                             key: 'note',
                           },
@@ -402,7 +383,7 @@ export const Component = () => {
   }, [searchKeyword, searchQuery, setSearchParams]);
 
   const { data, isLoading } = useQuery({
-    queryKey: ['adminUsers', searchQuery],
+    queryKey: adminKeys.users(searchQuery),
     queryFn: () => adminApi.searchUsers(searchQuery || undefined),
   });
 
@@ -421,7 +402,7 @@ export const Component = () => {
     onSuccess: () => {
       message.success(t('admin_users.user_updated'));
       setIsModalOpen(false);
-      queryClient.invalidateQueries({ queryKey: ['adminUsers'] });
+      queryClient.invalidateQueries({ queryKey: adminKeys.users() });
     },
     onError: (error) => {
       message.error((error as Error).message);
diff --git a/src/pages/api-tokens.tsx b/src/pages/api-tokens.tsx
index 3e1db88..2b28f1f 100644
--- a/src/pages/api-tokens.tsx
+++ b/src/pages/api-tokens.tsx
@@ -21,6 +21,7 @@ import { useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { api } from '@/services/api';
 import type { ApiToken } from '@/types';
+import { apiTokenKeys } from '@/utils/query-keys';
 
 const { Paragraph } = Typography;
 
@@ -34,7 +35,7 @@ function ApiTokensPage() {
   const [form] = Form.useForm();
 
   const { data, isLoading } = useQuery({
-    queryKey: ['apiTokens'],
+    queryKey: apiTokenKeys.all(),
     queryFn: api.listApiTokens,
   });
 
@@ -45,7 +46,7 @@ function ApiTokensPage() {
         setNewToken(result.token);
         setCreateModalVisible(false);
         message.success(t('api_tokens.create_success'));
-        queryClient.invalidateQueries({ queryKey: ['apiTokens'] });
+        queryClient.invalidateQueries({ queryKey: apiTokenKeys.all() });
         form.resetFields();
       }
     },
@@ -58,7 +59,7 @@ function ApiTokensPage() {
     mutationFn: api.revokeApiToken,
     onSuccess: () => {
       message.success(t('api_tokens.revoke_success'));
-      queryClient.invalidateQueries({ queryKey: ['apiTokens'] });
+      queryClient.invalidateQueries({ queryKey: apiTokenKeys.all() });
     },
     onError: (error: Error) => {
       message.error(error.message || t('api_tokens.revoke_failed'));
diff --git a/src/pages/apps.tsx b/src/pages/apps.tsx
index 8a2f192..a021a7f 100644
--- a/src/pages/apps.tsx
+++ b/src/pages/apps.tsx
@@ -24,9 +24,12 @@ const platformLabels: Record<AppItem['platform'], string> = {
   harmony: 'HarmonyOS',
 };
 
-const formatAppKey = (appKey?: string | null, t?: (key: string) => string) => {
+const formatAppKey = (
+  appKey: string | null | undefined,
+  t: (key: string) => string,
+) => {
   if (!appKey) {
-    return t?.('apps.key_pending') ?? '尚未生成 App Key';
+    return t('apps.key_pending');
   }
   if (appKey.length <= 16) {
     return appKey;
@@ -77,7 +80,7 @@ export const Component = () => {
     <div className="min-w-0">
       <div className="mb-5 flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
         <div>
-          <Title level={3} className="m-0!">
+          <Title level={4} className="m-0!">
             {t('apps.title')}
           </Title>
           <div className="mt-1 text-gray-500">{t('apps.description')}</div>
@@ -222,7 +225,7 @@ function AppCard({ app }: { app: AppItem }) {
               {(app.checkCount ?? 0).toLocaleString()}
             </span>
           </div>
-          <div className="pt-1 text-blue-600 text-xs opacity-0 transition-opacity group-hover:opacity-100">
+          <div className="pt-1 text-primary text-xs opacity-0 transition-opacity group-hover:opacity-100">
             {t('apps.open_manage')}
           </div>
         </div>
diff --git a/src/pages/audit-logs.tsx b/src/pages/audit-logs.tsx
index a5cc41b..1c14bfd 100644
--- a/src/pages/audit-logs.tsx
+++ b/src/pages/audit-logs.tsx
@@ -19,24 +19,18 @@ import {
   Typography,
 } from 'antd';
 import type { ColumnType } from 'antd/lib/table';
-import dayjs, { type Dayjs } from 'dayjs';
-import isSameOrAfter from 'dayjs/plugin/isSameOrAfter';
-import isSameOrBefore from 'dayjs/plugin/isSameOrBefore';
-import relativeTime from 'dayjs/plugin/relativeTime';
+import type { Dayjs } from 'dayjs';
 import { useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSearchParams } from 'react-router-dom';
 import { UAParser } from 'ua-parser-js';
+import type { AuditLog } from '@/types';
+import dayjs from '@/utils/dayjs';
 import { patchSearchParams } from '@/utils/helper';
 import { useAuditLogs } from '@/utils/hooks';
-import 'dayjs/locale/zh-cn';
 
 const { RangePicker } = DatePicker;
-const { Paragraph, Text } = Typography;
-
-dayjs.extend(relativeTime);
-dayjs.extend(isSameOrAfter);
-dayjs.extend(isSameOrBefore);
+const { Paragraph, Text, Title } = Typography;
 
 type TranslateFn = (key: string, options?: Record<string, unknown>) => string;
 
@@ -221,7 +215,7 @@ const buildSearchText = (t: TranslateFn, log: AuditLog) => {
 };
 
 export const AuditLogs = () => {
-  const { t, i18n } = useTranslation();
+  const { t } = useTranslation();
   const screens = Grid.useBreakpoint();
   const isMobile = !screens.md;
   const [searchParams, setSearchParams] = useSearchParams();
@@ -243,14 +237,6 @@ export const AuditLogs = () => {
   const statusFilterOptions = getStatusFilterOptions(t);
   const actionOptions = getActionOptions(t);
 
-  useEffect(() => {
-    dayjs.locale(
-      (i18n.resolvedLanguage ?? i18n.language).toLowerCase().startsWith('zh')
-        ? 'zh-cn'
-        : 'en',
-    );
-  }, [i18n.language, i18n.resolvedLanguage]);
-
   useEffect(() => {
     setSearchInput(searchParams.get('query')?.trim() ?? '');
   }, [searchParams]);
@@ -484,7 +470,7 @@ export const AuditLogs = () => {
         const actionLabel = getActionLabel(t, record.method, record.path);
         const isDelete = record.method.toUpperCase() === 'DELETE';
         return (
-          <span style={isDelete ? { color: '#ff4d4f' } : undefined}>
+          <span className={isDelete ? 'text-error' : undefined}>
             {actionLabel}
           </span>
         );
@@ -602,10 +588,10 @@ export const AuditLogs = () => {
       <div className="mb-4">
         <div className="mb-2 flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
           <div>
-            <h2 className="flex items-center gap-2 text-lg font-semibold md:text-xl">
+            <Title level={4} className="m-0! flex items-center gap-2">
               <FileTextOutlined />
               {t('audit_logs.title')}
-            </h2>
+            </Title>
             <p className="mt-1 text-sm text-gray-500">
               {t('audit_logs.description')}
             </p>
diff --git a/src/pages/login.tsx b/src/pages/login.tsx
index cac67b5..47dc82c 100644
--- a/src/pages/login.tsx
+++ b/src/pages/login.tsx
@@ -81,5 +81,9 @@ const style: Record<'body' | 'form' | 'logo' | 'slogan', CSSProperties> = {
     flex: 1,
   },
   logo: { textAlign: 'center', margin: '48px 0' },
-  slogan: { marginTop: 16, color: '#00000073', fontSize: 18 },
+  slogan: {
+    marginTop: 16,
+    color: 'var(--ant-color-text-secondary)',
+    fontSize: 18,
+  },
 };
diff --git a/src/pages/manage/components/bind-package.tsx b/src/pages/manage/components/bind-package.tsx
index 028abd2..5a33800 100644
--- a/src/pages/manage/components/bind-package.tsx
+++ b/src/pages/manage/components/bind-package.tsx
@@ -19,7 +19,7 @@ import { useTranslation } from 'react-i18next';
 import { api } from '@/services/api';
 import { useManageContext } from '../hooks/useManageContext';
 
-type DepChangeType = '新增' | '移除' | '版本变更';
+type DepChangeType = 'added' | 'removed' | 'changed';
 
 type DepChangeRow = {
   key: string;
@@ -51,9 +51,9 @@ type DepsChangePackage = {
 function getDepsChangeSummary(changes: DepChangeRow[]): DepChangeSummary {
   return changes.reduce(
     (acc, item) => {
-      if (item.changeType === '新增') {
+      if (item.changeType === 'added') {
         acc.added += 1;
-      } else if (item.changeType === '移除') {
+      } else if (item.changeType === 'removed') {
         acc.removed += 1;
       } else {
         acc.changed += 1;
@@ -81,32 +81,32 @@ function getDepsChangeColumns({
         <span>
           {t('bind_package.col_dependencies')}（
           <Checkbox
-            checked={filters.新增}
+            checked={filters.added}
             onChange={({ target }) => {
-              onFilterChange('新增', target.checked);
+              onFilterChange('added', target.checked);
             }}
           />
-          <span className="ml-1" style={{ color: '#dc2626', fontWeight: 700 }}>
+          <span className="ml-1 font-bold text-error">
             {t('bind_package.change_added')} {summary.added}
           </span>
           ，
           <Checkbox
-            checked={filters.移除}
+            checked={filters.removed}
             onChange={({ target }) => {
-              onFilterChange('移除', target.checked);
+              onFilterChange('removed', target.checked);
             }}
           />
-          <span className="ml-1" style={{ color: '#16a34a', fontWeight: 700 }}>
+          <span className="ml-1 font-bold text-success">
             {t('bind_package.change_removed')} {summary.removed}
           </span>
           ，
           <Checkbox
-            checked={filters.版本变更}
+            checked={filters.changed}
             onChange={({ target }) => {
-              onFilterChange('版本变更', target.checked);
+              onFilterChange('changed', target.checked);
             }}
           />
-          <span className="ml-1" style={{ color: '#d97706', fontWeight: 700 }}>
+          <span className="ml-1 font-bold text-warning">
             {t('bind_package.change_changed')} {summary.changed}
           </span>
           ）
@@ -121,30 +121,30 @@ function getDepsChangeColumns({
       key: 'versionChange',
       ellipsis: true,
       render: (_: unknown, record: DepChangeRow) => {
-        if (record.changeType === '版本变更') {
+        if (record.changeType === 'changed') {
           return (
             <span className="font-mono">
-              <span style={{ color: '#d97706', fontWeight: 600 }}>
+              <span className="font-semibold text-warning">
                 {record.oldVersion}
               </span>
               <ArrowRightOutlined className="mx-2 text-gray-400" />
-              <span style={{ color: '#d97706', fontWeight: 600 }}>
+              <span className="font-semibold text-warning">
                 {record.newVersion}
               </span>
             </span>
           );
         }
 
-        if (record.changeType === '新增') {
+        if (record.changeType === 'added') {
           return (
             <span className="font-mono">
-              <span style={{ color: '#dc2626', fontWeight: 700 }}>
+              <span className="font-bold text-error">
                 {t('bind_package.change_added')}
               </span>
               <span className="mx-2 text-gray-400">|</span>
-              <span style={{ color: '#6b7280' }}>{record.oldVersion}</span>
+              <span className="text-text-tertiary">{record.oldVersion}</span>
               <ArrowRightOutlined className="mx-2 text-gray-400" />
-              <span style={{ color: '#dc2626', fontWeight: 600 }}>
+              <span className="font-semibold text-error">
                 {record.newVersion}
               </span>
             </span>
@@ -153,15 +153,15 @@ function getDepsChangeColumns({
 
         return (
           <span className="font-mono">
-            <span style={{ color: '#16a34a', fontWeight: 700 }}>
+            <span className="font-bold text-success">
               {t('bind_package.change_removed')}
             </span>
             <span className="mx-2 text-gray-400">|</span>
-            <span style={{ color: '#16a34a', fontWeight: 600 }}>
+            <span className="font-semibold text-success">
               {record.oldVersion}
             </span>
             <ArrowRightOutlined className="mx-2 text-gray-400" />
-            <span style={{ color: '#6b7280' }}>{record.newVersion}</span>
+            <span className="text-text-tertiary">{record.newVersion}</span>
           </span>
         );
       },
@@ -180,9 +180,9 @@ const DepsChangeConfirmContent = ({
 }) => {
   const { t } = useTranslation();
   const [filters, setFilters] = useState<DepChangeFilters>({
-    新增: true,
-    移除: true,
-    版本变更: true,
+    added: true,
+    removed: true,
+    changed: true,
   });
 
   const summary = useMemo(() => getDepsChangeSummary(changes), [changes]);
@@ -252,7 +252,7 @@ function getDepsChanges(
         dependency: key,
         oldVersion: '-',
         newVersion: newValue,
-        changeType: '新增',
+        changeType: 'added',
       });
       continue;
     }
@@ -262,7 +262,7 @@ function getDepsChanges(
         dependency: key,
         oldVersion: oldValue,
         newVersion: '-',
-        changeType: '移除',
+        changeType: 'removed',
       });
       continue;
     }
@@ -276,7 +276,7 @@ function getDepsChanges(
         dependency: key,
         oldVersion: oldValue,
         newVersion: newValue,
-        changeType: '版本变更',
+        changeType: 'changed',
       });
     }
   }
diff --git a/src/pages/manage/components/commit.tsx b/src/pages/manage/components/commit.tsx
index 88004f9..db07635 100644
--- a/src/pages/manage/components/commit.tsx
+++ b/src/pages/manage/components/commit.tsx
@@ -1,8 +1,9 @@
 import { PullRequestOutlined } from '@ant-design/icons';
 import { Button, Popover } from 'antd';
-import dayjs from 'dayjs';
 import gitUrlParse from 'git-url-parse';
 import { useTranslation } from 'react-i18next';
+import type { Commit as CommitType } from '@/types';
+import dayjs from '@/utils/dayjs';
 
 const popoverOverlayStyle: React.CSSProperties = {
   maxWidth: 288,
@@ -10,7 +11,7 @@ const popoverOverlayStyle: React.CSSProperties = {
   overflowY: 'auto',
 };
 
-export const Commit = ({ commit }: { commit?: Commit }) => {
+export const Commit = ({ commit }: { commit?: CommitType }) => {
   const { t } = useTranslation();
 
   if (!commit) {
diff --git a/src/pages/manage/components/package-list.tsx b/src/pages/manage/components/package-list.tsx
index a9a8ee7..2709a03 100644
--- a/src/pages/manage/components/package-list.tsx
+++ b/src/pages/manage/components/package-list.tsx
@@ -24,6 +24,7 @@ import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 import { rootRouterPath } from '@/router';
 import { api } from '@/services/api';
+import type { Package } from '@/types';
 import { useManageContext } from '../hooks/useManageContext';
 import { Commit } from './commit';
 import { DepsTable } from './deps-table';
diff --git a/src/pages/manage/components/version-table.tsx b/src/pages/manage/components/version-table.tsx
index 869c881..66261e4 100644
--- a/src/pages/manage/components/version-table.tsx
+++ b/src/pages/manage/components/version-table.tsx
@@ -20,6 +20,7 @@ import { useTranslation } from 'react-i18next';
 import type { TextContent } from 'vanilla-jsoneditor';
 import { TEST_QR_CODE_DOC } from '@/constants/links';
 import { api } from '@/services/api';
+import type { Version } from '@/types';
 import { useVersions } from '@/utils/hooks';
 import { useManageContext } from '../hooks/useManageContext';
 import BindPackage from './bind-package';
diff --git a/src/pages/manage/hooks/useManageContext.tsx b/src/pages/manage/hooks/useManageContext.tsx
index c6063f8..22b4f12 100644
--- a/src/pages/manage/hooks/useManageContext.tsx
+++ b/src/pages/manage/hooks/useManageContext.tsx
@@ -5,6 +5,7 @@ import {
   useMemo,
   useState,
 } from 'react';
+import type { App, Binding, Package } from '@/types';
 import {
   useBinding,
   usePackages,
diff --git a/src/pages/manage/index.tsx b/src/pages/manage/index.tsx
index c5c215c..c6da903 100644
--- a/src/pages/manage/index.tsx
+++ b/src/pages/manage/index.tsx
@@ -18,6 +18,7 @@ import { AppDetailHeader } from '@/components/app-detail-header';
 import { AppDrawerLayout, useAppWorkspaceList } from '@/components/app-drawer';
 import { useAppSettingsModal } from '@/components/app-settings-modal';
 import { rootRouterPath, router } from '@/router';
+import type { Package } from '@/types';
 import { rememberRecentApp } from '@/utils/helper';
 import { useApp } from '@/utils/hooks';
 import PackageList from './components/package-list';
@@ -94,7 +95,7 @@ const PackageFilterControl = ({
       />
       <Dropdown menu={{ items }} trigger={['hover']}>
         <button
-          className="inline-flex h-10 cursor-pointer items-center gap-1 border-0 border-b-2 border-solid border-blue-500 bg-transparent px-1 text-sm font-medium text-blue-600"
+          className="inline-flex h-10 cursor-pointer items-center gap-1 border-0 border-b-2 border-solid border-primary bg-transparent px-1 text-sm font-medium text-primary"
           type="button"
         >
           <span>{filterLabel}</span>
diff --git a/src/pages/realtime-metrics.tsx b/src/pages/realtime-metrics.tsx
index 98f3c4c..ec8ca19 100644
--- a/src/pages/realtime-metrics.tsx
+++ b/src/pages/realtime-metrics.tsx
@@ -566,7 +566,7 @@ export const Component = () => {
 
                             <div className="mt-2 h-1.5 overflow-hidden rounded bg-gray-100">
                               <div
-                                className="h-full rounded bg-blue-500"
+                                className="h-full rounded bg-primary"
                                 style={{ width: `${barWidth}%` }}
                               />
                             </div>
diff --git a/src/pages/register.tsx b/src/pages/register.tsx
index b7f9851..78b674d 100644
--- a/src/pages/register.tsx
+++ b/src/pages/register.tsx
@@ -155,5 +155,9 @@ const style: Record<'body' | 'form' | 'logo' | 'slogan', CSSProperties> = {
     flex: 1,
   },
   logo: { textAlign: 'center', margin: '48px 0' },
-  slogan: { marginTop: 16, color: '#00000073', fontSize: 18 },
+  slogan: {
+    marginTop: 16,
+    color: 'var(--ant-color-text-secondary)',
+    fontSize: 18,
+  },
 };
diff --git a/src/pages/user.tsx b/src/pages/user.tsx
index 7e5d59f..88ff55e 100644
--- a/src/pages/user.tsx
+++ b/src/pages/user.tsx
@@ -21,13 +21,16 @@ import { useTranslation } from 'react-i18next';
 import i18n from '@/i18n';
 import { api } from '@/services/api';
 import { logout } from '@/services/auth';
+import type { Quota, Tier } from '@/types';
 import { ANNUAL_BILLING_MONTHS } from '@/utils/billing';
 import {
   CHECK_QUOTA_LOW_RATIO,
+  getCheckQuotaColors,
   getCheckQuotaWarningState,
 } from '@/utils/check-quota-warning';
 import { cn, isValidExternalUrl } from '@/utils/helper';
 import { useAppList, useUserInfo } from '@/utils/hooks';
+import { userKeys } from '@/utils/query-keys';
 import { PRICING_LINK } from '../constants/links';
 import { type products, quotas } from '../constants/quotas';
 
@@ -83,7 +86,7 @@ const getInvoiceHint = (t: (key: string) => string) => (
 
 function useOrderBillingConfig() {
   const { data } = useQuery({
-    queryKey: ['orderBillingConfig'],
+    queryKey: userKeys.orderBillingConfig(),
     queryFn: async () => {
       try {
         return await api.getOrderBillingConfig();
@@ -342,7 +345,7 @@ function PurchaseActionPopover({
                           'mt-0.5 truncate font-semibold text-sm tabular-nums',
                           option.disabled || loading
                             ? 'text-slate-400'
-                            : 'text-blue-700',
+                            : 'text-primary',
                         )}
                       >
                         {detail.value}
@@ -571,28 +574,27 @@ function UserPanel() {
   const appList = apps ?? [];
   const versionCountQueries = useQueries({
     queries: appList.map((app) => ({
-      queryKey: ['accountQuotaVersions', app.id],
+      queryKey: userKeys.accountQuotaVersions(app.id),
       queryFn: () => api.getVersions({ appId: app.id, limit: 1 }),
       staleTime: 60_000,
     })),
   });
   const packageCountQueries = useQueries({
     queries: appList.map((app) => ({
-      queryKey: ['accountQuotaPackages', app.id],
+      queryKey: userKeys.accountQuotaPackages(app.id),
       queryFn: () => api.getPackages(app.id),
       staleTime: 60_000,
     })),
   });
   const orderQuotesQuery = useQuery({
-    queryKey: [
-      'orderQuotes',
+    queryKey: userKeys.orderQuotes([
       user?.tier,
       user?.tierExpiresAt,
       user?.quota?.pv,
       user?.quota?.price,
       user?.quota?.monthlyRenewalPrice,
       user?.quota?.checkUpdateAddonUnits,
-    ],
+    ]),
     queryFn: () => api.getOrderQuotes(),
     enabled: !!user,
     retry: false,
@@ -610,7 +612,12 @@ function UserPanel() {
   const defaultQuota = quotas[tier as keyof typeof quotas];
   const currentQuota = quota || defaultQuota;
 
-  const tierDisplay = currentQuota.title;
+  const tierLabelKey = tier ? `user.purchasable_tiers.${tier}` : '';
+  const translatedTierLabel = tierLabelKey ? t(tierLabelKey) : '';
+  const tierDisplay =
+    translatedTierLabel && translatedTierLabel !== tierLabelKey
+      ? translatedTierLabel
+      : currentQuota.title;
   const appCount = appList.length;
   const versionCounts = versionCountQueries.map((query) => query.data?.count);
   const isVersionCountLoading = versionCountQueries.some(
@@ -861,6 +868,7 @@ function QuotaDetailsPanel({
   });
   const remainingPercent = quotaWarning.percent;
   const status = quotaWarning.progressStatus;
+  const quotaColors = getCheckQuotaColors(quotaWarning.level);
   const displayRemaining =
     typeof remainingChecks === 'number' ? remainingChecks : dailyQuota;
   const panelClassName = quotaWarning.isExceeded
@@ -975,18 +983,10 @@ function QuotaDetailsPanel({
               size="small"
               status={status}
               strokeColor={
-                quotaWarning.isExceeded
-                  ? '#ef4444'
-                  : quotaWarning.isLow
-                    ? '#f59e0b'
-                    : undefined
+                quotaWarning.isWarning ? quotaColors.stroke : undefined
               }
               trailColor={
-                quotaWarning.isExceeded
-                  ? '#fecaca'
-                  : quotaWarning.isLow
-                    ? '#fde68a'
-                    : undefined
+                quotaWarning.isWarning ? quotaColors.trail : undefined
               }
             />
           </div>
@@ -1229,7 +1229,7 @@ function MiniQuotaBars({
               ? 'bg-red-500 shadow-[0_0_0_1px_rgba(239,68,68,0.24)] hover:bg-red-600'
               : quotaWarning.isLow
                 ? 'bg-amber-500 hover:bg-amber-600'
-                : 'bg-blue-500 hover:bg-blue-600';
+                : 'bg-primary hover:bg-primary-hover';
             return (
               <div
                 className="flex h-full min-w-0 flex-1 flex-col items-center"
diff --git a/src/services/admin-api.ts b/src/services/admin-api.ts
index 49622d4..5dbe454 100644
--- a/src/services/admin-api.ts
+++ b/src/services/admin-api.ts
@@ -1,4 +1,4 @@
-import type { AdminApp, AdminUser, AdminVersion } from '@/types';
+import type { AdminApp, AdminUser, AdminVersion, Quota } from '@/types';
 import request from './request';
 
 export const adminApi = {
diff --git a/src/services/api.ts b/src/services/api.ts
index 45851bd..c1cb009 100644
--- a/src/services/api.ts
+++ b/src/services/api.ts
@@ -8,7 +8,12 @@ import type {
   User,
   Version,
 } from '@/types';
-import { versionKeys } from '@/utils/query-keys';
+import {
+  appKeys,
+  bindingKeys,
+  packageKeys,
+  versionKeys,
+} from '@/utils/query-keys';
 import { queryClient } from '@/utils/queryClient';
 import request from './request';
 
@@ -201,7 +206,7 @@ export const api = {
   deleteApp: (appId: number) =>
     request('delete', `/app/${appId}`).then(() => {
       queryClient.setQueryData(
-        ['appList'],
+        appKeys.list(),
         (old?: { data?: App[] } | undefined) => ({
           data: old?.data?.filter((i) => i.id !== appId) ?? [],
         }),
@@ -212,7 +217,7 @@ export const api = {
       if (!response) throw Error('Failed to create app');
       const { id } = response;
       queryClient.setQueryData(
-        ['appList'],
+        appKeys.list(),
         (old?: { data?: App[] } | undefined) => ({
           data: [...(old?.data || []), { ...params, id }],
         }),
@@ -224,12 +229,15 @@ export const api = {
     params: Omit<App, 'appKey' | 'checkCount' | 'id' | 'platform'>,
   ) =>
     request('put', `/app/${appId}`, params).then(() => {
-      queryClient.setQueryData(['app', appId], (old: App | undefined) => ({
-        ...old,
-        ...params,
-      }));
       queryClient.setQueryData(
-        ['appList'],
+        appKeys.detail(appId),
+        (old: App | undefined) => ({
+          ...old,
+          ...params,
+        }),
+      );
+      queryClient.setQueryData(
+        appKeys.list(),
         (old?: { data?: App[] } | undefined) => ({
           data:
             old?.data?.map((i) => (i.id === appId ? { ...i, ...params } : i)) ??
@@ -258,12 +266,16 @@ export const api = {
   }) =>
     request('put', `/app/${appId}/package/${packageId}`, params).then(() => {
       queryClient.setQueryData(
-        ['packages', appId],
-        ({ data }: { data: Package[] }) => ({
-          data: data?.map((i) =>
-            i.id === packageId ? { ...i, ...params } : i,
-          ),
-        }),
+        packageKeys.byApp(appId),
+        (old?: { data: Package[] }) =>
+          old
+            ? {
+                ...old,
+                data: old.data?.map((i) =>
+                  i.id === packageId ? { ...i, ...params } : i,
+                ),
+              }
+            : old,
       );
       if (params.versionId !== undefined) {
         queryClient.invalidateQueries({ queryKey: versionKeys.byApp(appId) });
@@ -272,10 +284,11 @@ export const api = {
   deletePackage: ({ appId, packageId }: { appId: number; packageId: number }) =>
     request('delete', `/app/${appId}/package/${packageId}`).then(() => {
       queryClient.setQueryData(
-        ['packages', appId],
-        ({ data }: { data: Package[] }) => ({
-          data: data?.filter((i) => i.id !== packageId),
-        }),
+        packageKeys.byApp(appId),
+        (old?: { data: Package[] }) =>
+          old
+            ? { ...old, data: old.data?.filter((i) => i.id !== packageId) }
+            : old,
       );
     }),
   deletePackages: ({
@@ -288,10 +301,14 @@ export const api = {
     request('delete', `/app/${appId}/package`, { packageIds }).then(() => {
       const packageIdSet = new Set(packageIds);
       queryClient.setQueryData(
-        ['packages', appId],
-        ({ data }: { data: Package[] }) => ({
-          data: data?.filter((i) => !packageIdSet.has(i.id)),
-        }),
+        packageKeys.byApp(appId),
+        (old?: { data: Package[] }) =>
+          old
+            ? {
+                ...old,
+                data: old.data?.filter((i) => !packageIdSet.has(i.id)),
+              }
+            : old,
       );
     }),
   // version
@@ -423,16 +440,16 @@ export const api = {
       config,
       packageId,
     }).then(() => {
-      queryClient.invalidateQueries({ queryKey: ['bindings', appId] });
+      queryClient.invalidateQueries({ queryKey: bindingKeys.byApp(appId) });
     }),
   upsertBindings: ({ appId, ...params }: UpsertBindingsParams) =>
     request('post', `/app/${appId}/binding/`, params).then(() => {
-      queryClient.invalidateQueries({ queryKey: ['bindings', appId] });
+      queryClient.invalidateQueries({ queryKey: bindingKeys.byApp(appId) });
     }),
   deleteBinding: ({ appId, bindingId }: { appId: number; bindingId: number }) =>
     request('delete', `/app/${appId}/binding/${bindingId}`).then(() => {
       queryClient.setQueriesData(
-        { queryKey: ['bindings', appId] },
+        { queryKey: bindingKeys.byApp(appId) },
         (old?: { data: Binding[] }) =>
           old
             ? { ...old, data: old.data?.filter((i) => i.id !== bindingId) }
diff --git a/src/services/auth.test.ts b/src/services/auth.test.ts
index e0f9145..282df6e 100644
--- a/src/services/auth.test.ts
+++ b/src/services/auth.test.ts
@@ -45,6 +45,12 @@ mock.module('hash-wasm', () => ({
   md5: mock(async (str) => `md5-${str}`),
 }));
 
+// i18n.t echoes the key so assertions can match on stable keys instead of
+// locale strings.
+mock.module('@/i18n', () => ({
+  default: { t: (key: string) => key },
+}));
+
 class MockRequestError extends Error {
   status?: number;
   constructor(message: string, status?: number) {
@@ -132,7 +138,7 @@ describe('auth.ts runtime test', () => {
         pwd: 'md5-mypassword',
       });
       expect(mockSetTokenObj).toHaveBeenCalledWith('fake-token');
-      expect(mockMessage.success).toHaveBeenCalledWith('登录成功');
+      expect(mockMessage.success).toHaveBeenCalledWith('login.success');
       expect(mockNavigate).toHaveBeenCalledWith('/');
     });
 
diff --git a/src/services/auth.ts b/src/services/auth.ts
index 5ba9a6e..6f61bd1 100644
--- a/src/services/auth.ts
+++ b/src/services/auth.ts
@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/naming-convention */
 import { message } from 'antd';
 import { md5 } from 'hash-wasm';
+import i18n from '@/i18n';
 import { rootRouterPath, router } from '@/router';
 import { api } from '@/services/api';
 import { RequestError, setToken } from '@/services/request';
@@ -36,14 +37,15 @@ export async function login(email: string, password: string) {
     const res = await api.login(params);
     if (res?.token) {
       setToken(res.token);
-      message.success('登录成功');
+      message.success(i18n.t('login.success'));
       router.navigate(resolveLoginFrom(getSearchParam('loginFrom')));
     }
   } catch (err) {
     if (err instanceof RequestError && err.status === 423) {
       router.navigate(rootRouterPath.inactivated);
     } else {
-      const errorMessage = err instanceof Error ? err.message : '登录失败';
+      const errorMessage =
+        err instanceof Error ? err.message : i18n.t('login.failed');
       message.error(errorMessage);
     }
   }
diff --git a/src/services/request.ts b/src/services/request.ts
index b858680..0a0432f 100644
--- a/src/services/request.ts
+++ b/src/services/request.ts
@@ -1,6 +1,10 @@
 import { message } from 'antd';
+import i18n from '@/i18n';
 import { testUrls } from '@/utils/helper';
-import { logout } from './auth';
+import { handleResponse, RequestError, type RequestOptions } from './response';
+
+export type { RequestOptions };
+export { RequestError };
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
 let _token = localStorage.getItem('token');
@@ -34,30 +38,10 @@ const getBaseUrl = (async () => {
       // remove /status
       baseUrl = ret.replace('/status', '');
     }
-    console.log('baseUrl', baseUrl);
     return baseUrl;
   });
 })();
 
-interface PushyResponse {
-  message?: string;
-}
-
-export class RequestError extends Error {
-  status?: number;
-
-  constructor(message: string, status?: number) {
-    super(message);
-    this.name = 'RequestError';
-    this.status = status;
-  }
-}
-
-export interface RequestOptions {
-  baseUrl?: string;
-  suppressErrorToast?: boolean;
-}
-
 export default async function request<T extends Record<any, any>>(
   method: 'get' | 'post' | 'put' | 'delete',
   path: string,
@@ -81,37 +65,20 @@ export default async function request<T extends Record<any, any>>(
   }
   try {
     const response = await fetch(url, options);
-    if (response.status === 401) {
-      logout();
-      return;
-    }
-    // TODO token 过期
-    const json = (await response.json()) as PushyResponse;
-    if (response.status === 200) {
-      return json as T & PushyResponse;
-    }
-
-    const error = new RequestError(
-      json.message || `Request failed with status ${response.status}`,
-      response.status,
-    );
-    if (!requestOptions.suppressErrorToast && error.message) {
-      message.error(error.message);
-    }
-    throw error;
+    return await handleResponse<T>(response, requestOptions);
   } catch (err) {
     if (err instanceof RequestError) {
       throw err;
     }
 
-    if ((err as Error).message.includes('Unauthorized')) {
-      logout();
-    } else {
-      if (!requestOptions.suppressErrorToast) {
-        message.error(`错误：${(err as Error).message}`);
-        message.error('如有使用代理，请关闭代理后重试');
-      }
-      throw err;
+    // Network-level failure (DNS, TLS, CORS, offline). The proxy hint is only
+    // meaningful here, not for parsed business errors.
+    if (!requestOptions.suppressErrorToast) {
+      message.error(
+        i18n.t('request.error', { message: (err as Error).message }),
+      );
+      message.error(i18n.t('request.proxy_hint'));
     }
+    throw err;
   }
 }
diff --git a/src/services/response.test.ts b/src/services/response.test.ts
new file mode 100644
index 0000000..70c7f5b
--- /dev/null
+++ b/src/services/response.test.ts
@@ -0,0 +1,131 @@
+import { afterEach, beforeEach, describe, expect, it, mock } from 'bun:test';
+
+const mockLogout = mock(() => {});
+const mockMessageError = mock(() => {});
+
+mock.module('antd', () => ({
+  message: { error: mockMessageError },
+}));
+
+mock.module('./auth', () => ({
+  logout: mockLogout,
+}));
+
+import { handleResponse, RequestError } from './response';
+
+function makeResponse(init: {
+  status: number;
+  body?: unknown;
+  contentType?: string | null;
+}): Response {
+  const { status, body, contentType = 'application/json' } = init;
+  const headers = new Headers();
+  if (contentType) {
+    headers.set('content-type', contentType);
+  }
+  return {
+    status,
+    ok: status >= 200 && status < 300,
+    headers,
+    json: async () => {
+      if (body === undefined) {
+        throw new SyntaxError('Unexpected end of JSON input');
+      }
+      return body;
+    },
+  } as unknown as Response;
+}
+
+describe('handleResponse', () => {
+  beforeEach(() => {
+    mockLogout.mockClear();
+    mockMessageError.mockClear();
+  });
+
+  afterEach(() => {
+    mock.restore();
+  });
+
+  it('returns parsed JSON on a 200 response', async () => {
+    const res = await handleResponse<{ data: number[] }>(
+      makeResponse({ status: 200, body: { data: [1, 2, 3] } }),
+    );
+    expect(res).toEqual({ data: [1, 2, 3] } as never);
+  });
+
+  it('treats any 2xx (e.g. 201) as success', async () => {
+    const res = await handleResponse<{ id: number }>(
+      makeResponse({ status: 201, body: { id: 7 } }),
+    );
+    expect(res).toEqual({ id: 7 } as never);
+  });
+
+  it('does not throw on a 204 empty (non-JSON) body', async () => {
+    const res = await handleResponse(
+      makeResponse({ status: 204, body: undefined, contentType: null }),
+    );
+    expect(res).toEqual({} as never);
+  });
+
+  it('throws RequestError and calls logout on 401 instead of resolving undefined', async () => {
+    let caught: unknown;
+    try {
+      await handleResponse(
+        makeResponse({ status: 401, body: { message: 'nope' } }),
+      );
+    } catch (err) {
+      caught = err;
+    }
+    expect(caught).toBeInstanceOf(RequestError);
+    expect((caught as RequestError).status).toBe(401);
+    expect(mockLogout).toHaveBeenCalledTimes(1);
+  });
+
+  it('throws RequestError with server message on a 4xx business error', async () => {
+    let caught: unknown;
+    try {
+      await handleResponse(
+        makeResponse({ status: 400, body: { message: 'bad params' } }),
+      );
+    } catch (err) {
+      caught = err;
+    }
+    expect(caught).toBeInstanceOf(RequestError);
+    expect((caught as RequestError).message).toBe('bad params');
+    expect(mockMessageError).toHaveBeenCalledWith('bad params');
+  });
+
+  it('does not toast the error when suppressErrorToast is set', async () => {
+    let caught: unknown;
+    try {
+      await handleResponse(
+        makeResponse({ status: 400, body: { message: 'silent' } }),
+        {
+          suppressErrorToast: true,
+        },
+      );
+    } catch (err) {
+      caught = err;
+    }
+    expect(caught).toBeInstanceOf(RequestError);
+    expect(mockMessageError).not.toHaveBeenCalled();
+  });
+
+  it('surfaces the status when the server returns a non-JSON error page', async () => {
+    let caught: unknown;
+    try {
+      await handleResponse(
+        makeResponse({
+          status: 502,
+          body: undefined,
+          contentType: 'text/html',
+        }),
+      );
+    } catch (err) {
+      caught = err;
+    }
+    expect(caught).toBeInstanceOf(RequestError);
+    expect((caught as RequestError).status).toBe(502);
+    expect((caught as RequestError).message).toContain('502');
+  });
+});
diff --git a/src/services/response.ts b/src/services/response.ts
new file mode 100644
index 0000000..19f5a3c
--- /dev/null
+++ b/src/services/response.ts
@@ -0,0 +1,61 @@
+import { message } from 'antd';
+import { logout } from './auth';
+
+export interface PushyResponse {
+  message?: string;
+}
+
+export class RequestError extends Error {
+  status?: number;
+
+  constructor(message: string, status?: number) {
+    super(message);
+    this.name = 'RequestError';
+    this.status = status;
+  }
+}
+
+export interface RequestOptions {
+  baseUrl?: string;
+  suppressErrorToast?: boolean;
+}
+
+/**
+ * Turn a fetch Response into the parsed payload, or throw a RequestError.
+ *
+ * Kept separate from the request/fetch plumbing so the branchy error handling
+ * (401, non-2xx, non-JSON bodies) is unit-testable without hitting the network.
+ */
+export async function handleResponse<T extends Record<any, any>>(
+  response: Response,
+  requestOptions: RequestOptions = {},
+): Promise<T & PushyResponse> {
+  if (response.status === 401) {
+    logout();
+    // Throw instead of resolving undefined: callers chain `.then()` to run
+    // optimistic cache updates, which must NOT run when the request was
+    // rejected as unauthorized.
+    throw new RequestError('Unauthorized', 401);
+  }
+
+  // Only parse JSON when the server actually returned JSON. A 204/empty body or
+  // an HTML error page (e.g. from a gateway/proxy) would otherwise make
+  // response.json() throw a SyntaxError that gets misreported downstream.
+  const contentType = response.headers.get('content-type') ?? '';
+  const json = (
+    contentType.includes('application/json') ? await response.json() : {}
+  ) as PushyResponse;
+
+  if (response.ok) {
+    return json as T & PushyResponse;
+  }
+
+  const error = new RequestError(
+    json.message || `Request failed with status ${response.status}`,
+    response.status,
+  );
+  if (!requestOptions.suppressErrorToast && error.message) {
+    message.error(error.message);
+  }
+  throw error;
+}
diff --git a/src/theme.ts b/src/theme.ts
new file mode 100644
index 0000000..0833bd8
--- /dev/null
+++ b/src/theme.ts
@@ -0,0 +1,16 @@
+import type { ThemeConfig } from 'antd';
+
+/**
+ * 品牌主色，与 index.html 的 theme-color、logo 保持一致。
+ * 作为全站唯一色彩来源：antd 组件走 token，Tailwind 通过 index.css 的
+ * @theme 映射消费 antd 暴露的 CSS 变量（--ant-color-*）。
+ */
+export const BRAND_PRIMARY = '#4483ed';
+
+export const themeConfig: ThemeConfig = {
+  // 开启 CSS 变量模式，antd 会输出 --ant-color-primary 等变量，供 Tailwind 复用。
+  cssVar: {},
+  token: {
+    colorPrimary: BRAND_PRIMARY,
+  },
+};
diff --git a/src/utils/check-quota-warning.ts b/src/utils/check-quota-warning.ts
index 16f4e01..5f242d2 100644
--- a/src/utils/check-quota-warning.ts
+++ b/src/utils/check-quota-warning.ts
@@ -2,6 +2,33 @@ export const CHECK_QUOTA_LOW_RATIO = 0.2;
 
 export type CheckQuotaWarningLevel = 'normal' | 'low' | 'exceeded';
 
+/**
+ * 配额三态（正常 / 偏低 / 超额）对应的进度条颜色。
+ * 前景色走 antd CSS 变量（cssVar 模式下运行时注入），与全站主题联动；
+ * 轨道色是与之匹配的浅色底，antd 未暴露成单一 token，故集中定义在此。
+ */
+export const CHECK_QUOTA_COLORS: Record<
+  CheckQuotaWarningLevel,
+  { stroke: string; trail: string }
+> = {
+  exceeded: {
+    stroke: 'var(--ant-color-error)',
+    trail: 'var(--ant-color-error-bg)',
+  },
+  low: {
+    stroke: 'var(--ant-color-warning)',
+    trail: 'var(--ant-color-warning-bg)',
+  },
+  normal: {
+    stroke: 'var(--ant-color-primary)',
+    trail: 'var(--ant-color-fill-secondary)',
+  },
+};
+
+export function getCheckQuotaColors(level: CheckQuotaWarningLevel) {
+  return CHECK_QUOTA_COLORS[level];
+}
+
 interface CheckQuotaWarningInput {
   dailyQuota?: number;
   remaining?: number;
diff --git a/src/utils/dayjs.ts b/src/utils/dayjs.ts
new file mode 100644
index 0000000..e111ee9
--- /dev/null
+++ b/src/utils/dayjs.ts
@@ -0,0 +1,32 @@
+import dayjs from 'dayjs';
+import isSameOrAfter from 'dayjs/plugin/isSameOrAfter';
+import isSameOrBefore from 'dayjs/plugin/isSameOrBefore';
+import relativeTime from 'dayjs/plugin/relativeTime';
+import i18n from '@/i18n';
+import 'dayjs/locale/zh-cn';
+
+// English is dayjs' built-in default locale, no import needed.
+
+dayjs.extend(relativeTime);
+dayjs.extend(isSameOrAfter);
+dayjs.extend(isSameOrBefore);
+
+const toDayjsLocale = (language: string) =>
+  language.toLowerCase().startsWith('zh') ? 'zh-cn' : 'en';
+
+/**
+ * Keep dayjs' global locale in sync with the active i18n language, so relative
+ * times ("3 hours ago") and formatted dates localize correctly. Called once at
+ * startup and again whenever the language changes.
+ */
+export const syncDayjsLocale = (language?: string) => {
+  dayjs.locale(
+    toDayjsLocale(language ?? i18n.resolvedLanguage ?? i18n.language),
+  );
+};
+
+// Sync locale after i18n finishes initialization (not at import time)
+i18n.on('initialized', syncDayjsLocale);
+i18n.on('languageChanged', syncDayjsLocale);
+
+export default dayjs;
diff --git a/src/utils/helper.ts b/src/utils/helper.ts
index 7a73c2b..b70aa5b 100644
--- a/src/utils/helper.ts
+++ b/src/utils/helper.ts
@@ -1,4 +1,5 @@
 import type { NavigateOptions, SetURLSearchParams } from 'react-router-dom';
+import type { VersionConfig } from '@/types';
 
 export function isPasswordValid(password: string) {
   return /(?!^[0-9]+$)(?!^[a-z]+$)(?!^[^A-Z]+$)^.{6,16}$/.test(password);
diff --git a/src/utils/hooks.ts b/src/utils/hooks.ts
index c47ab1e..497f8a6 100644
--- a/src/utils/hooks.ts
+++ b/src/utils/hooks.ts
@@ -1,14 +1,18 @@
 import { keepPreviousData, useQuery } from '@tanstack/react-query';
-import dayjs from 'dayjs';
-import relativeTime from 'dayjs/plugin/relativeTime';
+import { useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { api } from '@/services/api';
 import { getToken } from '@/services/request';
-import { versionKeys } from '@/utils/query-keys';
-import 'dayjs/locale/zh-cn';
-import { useEffect, useMemo, useState } from 'react';
-
-dayjs.locale('zh-cn');
-dayjs.extend(relativeTime);
+import type { App, Package } from '@/types';
+import dayjs from '@/utils/dayjs';
+import {
+  appKeys,
+  auditKeys,
+  bindingKeys,
+  packageKeys,
+  userKeys,
+  versionKeys,
+} from '@/utils/query-keys';
 
 const METRIC_CATEGORY_SEPARATOR = '\u001f';
 const PACKAGE_METRIC_PREFIX = `packageVersion_buildTime${METRIC_CATEGORY_SEPARATOR}`;
@@ -170,8 +174,9 @@ export const useLocalStorageCooldown = ({
 };
 
 export const useUserInfo = () => {
+  const { t } = useTranslation();
   const { data, isLoading } = useQuery({
-    queryKey: ['userInfo'],
+    queryKey: userKeys.info(),
     queryFn: api.me,
     enabled: () => !!getToken(),
   });
@@ -181,21 +186,21 @@ export const useUserInfo = () => {
           ...data,
           quota: {
             ...data.quota,
-            title: '定制版',
+            title: t('user.purchasable_tiers.custom'),
           },
         }
       : data;
   const expireDay = dayjs(data?.tierExpiresAt);
   const displayExpireDay = data?.tierExpiresAt
-    ? expireDay.format('YYYY年MM月DD日')
-    : '无';
+    ? expireDay.format(t('user.date_format'))
+    : t('user.no_expire');
   const now = data?.serverTime ? dayjs(data.serverTime) : dayjs();
   const remainingDays = data?.tierExpiresAt
     ? expireDay.add(1, 'day').diff(now, 'day')
     : null;
-  const isExpiringSoon = remainingDays !== null && remainingDays <= 90;
+  const isExpiringSoon = remainingDays !== null && remainingDays >= 0 && remainingDays <= 90;
   const displayRemainingDays = isExpiringSoon
-    ? `(剩余 ${remainingDays} 天，之后转为免费版)`
+    ? t('user.remaining_note', { days: remainingDays })
     : '';
   return {
     user: getToken() ? user : null,
@@ -208,7 +213,7 @@ export const useUserInfo = () => {
 
 export const useAppList = () => {
   const { data, isLoading } = useQuery({
-    queryKey: ['appList'],
+    queryKey: appKeys.list(),
     queryFn: api.appList,
   });
   return { apps: data?.data, isLoading };
@@ -216,7 +221,7 @@ export const useAppList = () => {
 
 export const useApp = (appId: number) => {
   const { data } = useQuery({
-    queryKey: ['app', appId],
+    queryKey: appKeys.detail(appId),
     queryFn: () => api.getApp(appId),
   });
   return { app: data };
@@ -224,7 +229,7 @@ export const useApp = (appId: number) => {
 
 export const usePackages = (appId: number) => {
   const { data, isLoading } = useQuery({
-    queryKey: ['packages', appId],
+    queryKey: packageKeys.byApp(appId),
     queryFn: () => api.getPackages(appId),
   });
   const { packageMap, packages } = useMemo(() => {
@@ -288,7 +293,7 @@ export const useAllVersions = ({
 
 export const useBinding = (appId: number) => {
   const { data, isLoading } = useQuery({
-    queryKey: ['bindings', appId],
+    queryKey: bindingKeys.byApp(appId),
     queryFn: () => api.getBinding(appId),
   });
   const bindings = data?.data ?? [];
@@ -355,7 +360,7 @@ export const useAuditLogs = ({
 }) => {
   // Fetch all audit logs (up to 1000) from backend and cache them
   const { data, isLoading } = useQuery({
-    queryKey: ['auditLogs'],
+    queryKey: auditKeys.all(),
     staleTime: 3000,
     queryFn: () =>
       api.getAuditLogs({
diff --git a/src/utils/notice.tsx b/src/utils/notice.tsx
index 097a2a1..a1758c7 100644
--- a/src/utils/notice.tsx
+++ b/src/utils/notice.tsx
@@ -1,33 +1,51 @@
 import { Modal } from 'antd';
+import i18n from '@/i18n';
 
 const { confirm } = Modal;
 
-const notices = {
-  'v8-deprecation': {
-    title: '通知：react-native-update 即将停止支持 v8 以下版本',
-    content: (
-      <>
-        <p>
-          从<span style={{ color: '#f50' }}>2025年8月10日</span>起低于 v8
-          版本的原生包和热更包将无法上传，请尽快升级到 v8
-          及以上版本。已上传的版本不受影响。
-        </p>
-        <p>跨大版本更新时需要重新打原生包，并请充分测试。</p>
-        <p>v5 - v9 版本代码基本兼容，v10 版本代码与之前版本不兼容。</p>
-        <p>升级相关的技术问题，请在 QQ 群 729013783 中咨询技术支持。</p>
-      </>
-    ),
-    okText: '我知道了',
-    cancelText: '不再显示',
-    onCancel: () => {
-      localStorage.setItem('v8-deprecation', '1');
-    },
-  },
-};
+type NoticeKey = 'v8-deprecation';
 
-Object.entries(notices).forEach(([key, value]) => {
-  const flag = localStorage.getItem(key);
-  if (!flag) {
-    confirm(value);
+const buildNotice = (key: NoticeKey) => {
+  const t = i18n.t.bind(i18n);
+  if (key === 'v8-deprecation') {
+    return {
+      title: t('notice.v8_deprecation_title'),
+      content: (
+        <>
+          <p>
+            {t('notice.v8_deprecation_p1_before')}
+            <span style={{ color: 'var(--ant-color-error)' }}>
+              {t('notice.v8_deprecation_date')}
+            </span>
+            {t('notice.v8_deprecation_p1_after')}
+          </p>
+          <p>{t('notice.v8_deprecation_p2')}</p>
+          <p>{t('notice.v8_deprecation_p3')}</p>
+          <p>{t('notice.v8_deprecation_p4')}</p>
+        </>
+      ),
+      okText: t('notice.ok'),
+      cancelText: t('notice.dont_show_again'),
+      onCancel: () => {
+        localStorage.setItem(key, '1');
+      },
+    };
   }
-});
+  return null;
+};
+
+/**
+ * 显示尚未被用户关闭（"不再显示"）的公告。
+ * 显式调用，避免 import 即弹窗的副作用。
+ */
+export function showNotices() {
+  // (['v8-deprecation'] as NoticeKey[]).forEach((key) => {
+  //   if (localStorage.getItem(key)) {
+  //     return;
+  //   }
+  //   const notice = buildNotice(key);
+  //   if (notice) {
+  //     confirm(notice);
+  //   }
+  // });
+}
diff --git a/src/utils/query-keys.test.ts b/src/utils/query-keys.test.ts
index ac1c68c..eef8956 100644
--- a/src/utils/query-keys.test.ts
+++ b/src/utils/query-keys.test.ts
@@ -1,5 +1,16 @@
 import { describe, expect, test } from 'bun:test';
-import { versionKeys } from './query-keys';
+import {
+  activateKeys,
+  adminKeys,
+  apiTokenKeys,
+  appKeys,
+  auditKeys,
+  bindingKeys,
+  metricsKeys,
+  packageKeys,
+  userKeys,
+  versionKeys,
+} from './query-keys';
 
 describe('versionKeys', () => {
   describe('byApp', () => {
@@ -82,3 +93,78 @@ describe('versionKeys', () => {
     });
   });
 });
+
+describe('domain key factories', () => {
+  test('appKeys', () => {
+    expect(appKeys.list()).toEqual(['appList']);
+    expect(appKeys.detail(3)).toEqual(['app', 3]);
+  });
+
+  test('packageKeys / bindingKeys', () => {
+    expect(packageKeys.byApp(7)).toEqual(['packages', 7]);
+    expect(bindingKeys.byApp(7)).toEqual(['bindings', 7]);
+  });
+
+  test('userKeys', () => {
+    expect(userKeys.info()).toEqual(['userInfo']);
+    expect(userKeys.orderBillingConfig()).toEqual(['orderBillingConfig']);
+    expect(userKeys.accountQuotaVersions(1)).toEqual([
+      'accountQuotaVersions',
+      1,
+    ]);
+    expect(userKeys.orderQuotes(['pro', undefined, 100])).toEqual([
+      'orderQuotes',
+      'pro',
+      undefined,
+      100,
+    ]);
+  });
+
+  test('auditKeys / apiTokenKeys / activateKeys', () => {
+    expect(auditKeys.all()).toEqual(['auditLogs']);
+    expect(apiTokenKeys.all()).toEqual(['apiTokens']);
+    expect(activateKeys.byToken('t')).toEqual(['activate', 't']);
+    expect(activateKeys.byToken(null)).toEqual(['activate', null]);
+  });
+
+  test('metricsKeys', () => {
+    expect(metricsKeys.global('a', 'b', 'pv')).toEqual([
+      'globalMetrics',
+      'a',
+      'b',
+      'pv',
+    ]);
+    expect(metricsKeys.internal('main')).toEqual(['internalMetrics', 'main']);
+    expect(metricsKeys.internalApi5xxEvents('main', 20)).toEqual([
+      'internalApi5xxEvents',
+      'main',
+      20,
+    ]);
+  });
+
+  describe('adminKeys.users partial matching', () => {
+    test('base key is a prefix of the searched key', () => {
+      const base = adminKeys.users();
+      const searched = adminKeys.users('alice');
+      expect(base).toEqual(['adminUsers']);
+      expect(searched).toEqual(['adminUsers', 'alice']);
+      // invalidateQueries(base) must match the more specific searched key
+      expect(searched.slice(0, base.length)).toEqual(base);
+    });
+  });
+
+  describe('adminKeys.apps partial matching', () => {
+    test('base key is a prefix of the paged key', () => {
+      const base = adminKeys.apps();
+      const paged = adminKeys.apps('q', 2, 10);
+      expect(base).toEqual(['adminApps']);
+      expect(paged).toEqual(['adminApps', 'q', 2, 10]);
+      expect(paged.slice(0, base.length)).toEqual(base);
+    });
+  });
+
+  test('adminKeys.userDetail / config', () => {
+    expect(adminKeys.userDetail(5)).toEqual(['adminUserDetail', 5]);
+    expect(adminKeys.config()).toEqual(['adminConfig']);
+  });
+});
diff --git a/src/utils/query-keys.ts b/src/utils/query-keys.ts
index ab971d3..66a02a5 100644
--- a/src/utils/query-keys.ts
+++ b/src/utils/query-keys.ts
@@ -4,3 +4,60 @@ export const versionKeys = {
     ['versions', appId, 'page', offset, limit] as const,
   all: (appId: number) => ['versions', appId, 'all'] as const,
 };
+
+export const appKeys = {
+  list: () => ['appList'] as const,
+  detail: (appId: number) => ['app', appId] as const,
+};
+
+export const packageKeys = {
+  byApp: (appId: number) => ['packages', appId] as const,
+};
+
+export const bindingKeys = {
+  byApp: (appId: number) => ['bindings', appId] as const,
+};
+
+export const userKeys = {
+  info: () => ['userInfo'] as const,
+  orderBillingConfig: () => ['orderBillingConfig'] as const,
+  orderQuotes: (parts: ReadonlyArray<string | number | undefined>) =>
+    ['orderQuotes', ...parts] as const,
+  accountQuotaVersions: (appId: number) =>
+    ['accountQuotaVersions', appId] as const,
+  accountQuotaPackages: (appId: number) =>
+    ['accountQuotaPackages', appId] as const,
+};
+
+export const auditKeys = {
+  all: () => ['auditLogs'] as const,
+};
+
+export const apiTokenKeys = {
+  all: () => ['apiTokens'] as const,
+};
+
+export const activateKeys = {
+  byToken: (token: string | null) => ['activate', token] as const,
+};
+
+export const metricsKeys = {
+  global: (startDate: string, endDate: string, mode: 'pv' | 'uv') =>
+    ['globalMetrics', startDate, endDate, mode] as const,
+  internal: (target: string) => ['internalMetrics', target] as const,
+  internalApi5xxEvents: (target: string, offset: number) =>
+    ['internalApi5xxEvents', target, offset] as const,
+};
+
+export const adminKeys = {
+  users: (searchQuery?: string) =>
+    searchQuery === undefined
+      ? (['adminUsers'] as const)
+      : (['adminUsers', searchQuery] as const),
+  userDetail: (userId: number | null) => ['adminUserDetail', userId] as const,
+  apps: (searchQuery?: string, page?: number, pageSize?: number) =>
+    searchQuery === undefined
+      ? (['adminApps'] as const)
+      : (['adminApps', searchQuery, page, pageSize] as const),
+  config: () => ['adminConfig'] as const,
+};