diff --git a/docs/architecture.md b/docs/architecture.md
index 48247ed32..ddb1db30e 100644
--- a/docs/architecture.md
+++ b/docs/architecture.md
@@ -313,7 +313,7 @@ Client Key 费用账本独立累计各次 attempt 的实际费用，不能因请
 
 ### 3.4 前端模块职责
 
-`frontend/src` 持有应用状态和业务交互，基础组件与主题算法由 `@codex-proxy/ui` 提供：
+`frontend/src` 持有应用状态和业务交互，基础组件与主题算法由 `@codex-proxy/ui` 提供，组件目录与合同见 [UI 组件架构](../modules/ui/playground/guide/architecture.md)：
 
 | 入口 | 职责 |
 | --- | --- |
diff --git a/docs/development.md b/docs/development.md
index 3e33d3420..1a86920e4 100644
--- a/docs/development.md
+++ b/docs/development.md
@@ -63,6 +63,8 @@ pnpm --dir frontend dev
 后端职责和依赖方向见 [Workspace 边界](architecture.md#3-workspace-边界)，页面与共享逻辑见 [前端模块职责](architecture.md#34-前端模块职责)。
 先按所属模块定位，再跟踪请求、状态与展示的调用关系
 
+共享 UI 的命名与目录见[组件架构](../modules/ui/playground/guide/architecture.md)
+
 ## 源码联调
 
 宿主、组件库和官方插件保留独立仓库，通过 Git 子模块在同一目录开发：
diff --git a/frontend/package.json b/frontend/package.json
index c90605f8a..6ad7c1f02 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -17,7 +17,7 @@
   },
   "dependencies": {
     "@boxicons/vue": "1.0.1",
-    "@codex-proxy/ui": "github:zyycn/codex-proxy-ui#v0.3.2",
+    "@codex-proxy/ui": "github:zyycn/codex-proxy-ui#v0.4.0",
     "@fontsource-variable/inter": "^5.3.0",
     "@fontsource-variable/jetbrains-mono": "^5.3.0",
     "@lucide/vue": "^1.47.0",
diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
index 4f0a18e2d..19c5d66bc 100644
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
@@ -170,8 +170,8 @@ importers:
         specifier: 1.0.1
         version: 1.0.1(vue@3.5.43(typescript@6.0.3))
       '@codex-proxy/ui':
-        specifier: github:zyycn/codex-proxy-ui#v0.3.2
-        version: https://codeload.github.com/zyycn/codex-proxy-ui/tar.gz/83c92024dec82b5a644d6adca96a140c541684b0(axios@1.20.0(debug@4.4.3))(change-case@5.4.4)(vite@8.3.0(@types/node@26.6.2)(jiti@2.7.0)(yaml@2.9.0))(vue@3.5.43(typescript@6.0.3))
+        specifier: github:zyycn/codex-proxy-ui#v0.4.0
+        version: https://codeload.github.com/zyycn/codex-proxy-ui/tar.gz/db615f3d72975e0d09847a07d03ed5fe7ba8c8b0(axios@1.20.0(debug@4.4.3))(change-case@5.4.4)(vite@8.3.0(@types/node@26.6.2)(jiti@2.7.0)(yaml@2.9.0))(vue@3.5.43(typescript@6.0.3))
       '@fontsource-variable/inter':
         specifier: ^5.3.0
         version: 5.3.0
@@ -381,9 +381,9 @@ packages:
     resolution: {integrity: sha512-y7/yvZ2TPAnR9+jnc00klvNNLkJiXFFrQA/hlLCcxA9a2A4zQIOimyFQ9XfwYKiGD1fb5GY8vbKIIgO8d5Tb2A==}
     engines: {node: '>= 20.12.0'}
 
-  '@codex-proxy/ui@https://codeload.github.com/zyycn/codex-proxy-ui/tar.gz/83c92024dec82b5a644d6adca96a140c541684b0':
-    resolution: {gitHosted: true, integrity: sha512-9s6sXP8QrUZATh80wQnIMi68lORp+HuixhoXM2WANsgULqF0Rq270VHllSCNISUCj6aP8t5ugNDPkIrkAFpu3A==, tarball: https://codeload.github.com/zyycn/codex-proxy-ui/tar.gz/83c92024dec82b5a644d6adca96a140c541684b0}
-    version: 0.3.2
+  '@codex-proxy/ui@https://codeload.github.com/zyycn/codex-proxy-ui/tar.gz/db615f3d72975e0d09847a07d03ed5fe7ba8c8b0':
+    resolution: {gitHosted: true, integrity: sha512-AhG9idgKHs9AWY1Fyo75wlVcBx3KXD3NEY1dF+sOg84PGAz/7mKq6Fb4xqkYqCT6UrduTjT3WbAw/2VhJJdblQ==, tarball: https://codeload.github.com/zyycn/codex-proxy-ui/tar.gz/db615f3d72975e0d09847a07d03ed5fe7ba8c8b0}
+    version: 0.4.0
     engines: {node: '>=24'}
     peerDependencies:
       vite: ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0
@@ -537,6 +537,11 @@ packages:
     peerDependencies:
       vue: '>=3.0.1'
 
+  '@lucide/vue@1.54.0':
+    resolution: {integrity: sha512-fq5S0Fk3a3c2VPs+QRiiHZylZV+1pxyTyOYxoH507b/OdiqciUiEm83N7d7xijS8lDlsGFf12ad9AkLGVHRevg==}
+    peerDependencies:
+      vue: '>=3.0.1'
+
   '@ota-meshi/ast-token-store@0.3.0':
     resolution: {integrity: sha512-XRO0zi2NIUKq2lUk3T1ecFSld1fMWRKE6naRFGkgkdeosx7IslyUKNv5Dcb5PJTja9tHJoFu0v/7yEpAkrkrTg==}
     engines: {node: ^20.19.0 || ^22.13.0 || >=24}
@@ -1319,8 +1324,8 @@ packages:
     resolution: {integrity: sha512-EjePK1srD3P08o2j4f0ExnylqRs5B9tJjcp9t1krH2qRi8CCdsYfwe9JgSLurFBWwq4uOlipzfk5fHNvwFKr8Q==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
 
-  dompurify@3.4.15:
-    resolution: {integrity: sha512-EUBjM+B+lkDE41iE82DDSCfkoPGfXx8IxFxPMjNzm/Uk4xDet77rTN9wqlxlVg71kK7XGuUMv6wUxJUwwv+Xyw==}
+  dompurify@3.4.16:
+    resolution: {integrity: sha512-sqo+pNp3qRhCIpbgRi1y8Tgk27Bo2Ry7w0dC1NBeNTdZChWjz9Xb/KOoZbRP/R6pQZ80Qw8YhXw13hWWBbMRnQ==}
 
   dunder-proto@1.0.1:
     resolution: {integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==}
@@ -2003,8 +2008,8 @@ packages:
   markdown-table@3.0.4:
     resolution: {integrity: sha512-wiYz4+JrLyb/DqW2hkFJxP7Vd7JuTDm77fvbM8VfEQdmSMqcImWeeRbHwZjBjIFki/VaMK2BhFi7oUUZeM5bqw==}
 
-  marked@18.0.14:
-    resolution: {integrity: sha512-mBHK6FBHuBAlhgRe88w9F0O1AbwwXJUcQibUbC/QcdTbVGAD7aWza+xt3N6oT/jCZx3/OMeS+8rnuiHZcQ9s7A==}
+  marked@18.1.0:
+    resolution: {integrity: sha512-PamYXWWWg2nboG3oX5Ffzpy3EFZROqZJK9hSlMmUnekp7TxPs5DcT95vwd46m73/exfKCRVMtgXoPMI4FEJL6w==}
     engines: {node: '>= 20'}
     hasBin: true
 
@@ -2777,17 +2782,17 @@ snapshots:
       fast-wrap-ansi: 0.2.2
       sisteransi: 1.0.5
 
-  '@codex-proxy/ui@https://codeload.github.com/zyycn/codex-proxy-ui/tar.gz/83c92024dec82b5a644d6adca96a140c541684b0(axios@1.20.0(debug@4.4.3))(change-case@5.4.4)(vite@8.3.0(@types/node@26.6.2)(jiti@2.7.0)(yaml@2.9.0))(vue@3.5.43(typescript@6.0.3))':
+  '@codex-proxy/ui@https://codeload.github.com/zyycn/codex-proxy-ui/tar.gz/db615f3d72975e0d09847a07d03ed5fe7ba8c8b0(axios@1.20.0(debug@4.4.3))(change-case@5.4.4)(vite@8.3.0(@types/node@26.6.2)(jiti@2.7.0)(yaml@2.9.0))(vue@3.5.43(typescript@6.0.3))':
     dependencies:
       '@ant-design/colors': 8.0.1
       '@ant-design/fast-color': 3.0.1
-      '@lucide/vue': 1.47.0(vue@3.5.43(typescript@6.0.3))
+      '@lucide/vue': 1.54.0(vue@3.5.43(typescript@6.0.3))
       '@vueuse/core': 15.0.0(vue@3.5.43(typescript@6.0.3))
       '@vueuse/integrations': 15.0.0(axios@1.20.0(debug@4.4.3))(change-case@5.4.4)(sortablejs@1.15.7)(vue@3.5.43(typescript@6.0.3))
-      dompurify: 3.4.15
+      dompurify: 3.4.16
       es-toolkit: 1.52.0
       gsap: 3.15.0
-      marked: 18.0.14
+      marked: 18.1.0
       sortablejs: 1.15.7
       vue: 3.5.43(typescript@6.0.3)
     optionalDependencies:
@@ -2955,6 +2960,10 @@ snapshots:
     dependencies:
       vue: 3.5.43(typescript@6.0.3)
 
+  '@lucide/vue@1.54.0(vue@3.5.43(typescript@6.0.3))':
+    dependencies:
+      vue: 3.5.43(typescript@6.0.3)
+
   '@ota-meshi/ast-token-store@0.3.0': {}
 
   '@oxc-project/types@0.149.0': {}
@@ -3581,7 +3590,7 @@ snapshots:
 
   diff-sequences@29.6.3: {}
 
-  dompurify@3.4.15:
+  dompurify@3.4.16:
     optionalDependencies:
       '@types/trusted-types': 2.0.7
 
@@ -4270,7 +4279,7 @@ snapshots:
 
   markdown-table@3.0.4: {}
 
-  marked@18.0.14: {}
+  marked@18.1.0: {}
 
   math-intrinsics@1.1.0: {}
 
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 8d0c05d35..a78fb6fd3 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,10 +1,7 @@
 <script setup lang="ts">
-import { BaseToast } from '@codex-proxy/ui'
-
 import { RouterView } from 'vue-router'
 </script>
 
 <template>
   <RouterView />
-  <BaseToast />
 </template>
diff --git a/frontend/src/api/request/plugins/feedback.ts b/frontend/src/api/request/plugins/feedback.ts
index 108254bcc..2e96e3ccf 100644
--- a/frontend/src/api/request/plugins/feedback.ts
+++ b/frontend/src/api/request/plugins/feedback.ts
@@ -1,5 +1,5 @@
 import type { RequestContext, RequestNext } from './index'
-import { toast } from '@codex-proxy/ui'
+import { ZNotification } from '@codex-proxy/ui'
 import { ApiError, isSessionRequired } from './error'
 
 // 共享刷新 Promise 的同一个失败只提示一次，弱引用不保留已结束请求
@@ -13,7 +13,7 @@ export async function feedbackPlugin(context: RequestContext, next: RequestNext)
     if (error instanceof ApiError && error.kind !== 'cancelled' && !isSessionRequired(error)
       && !context.config.silent && context.isCurrent() && !reported.has(error)) {
       reported.add(error)
-      toast.error(error.message)
+      ZNotification.error({ message: error.message })
     }
     throw error
   }
diff --git a/frontend/src/api/request/plugins/session.ts b/frontend/src/api/request/plugins/session.ts
index 4a534787f..3100c071a 100644
--- a/frontend/src/api/request/plugins/session.ts
+++ b/frontend/src/api/request/plugins/session.ts
@@ -1,6 +1,6 @@
 import type { RequestConfig } from '../index'
 import type { RequestContext, RequestNext } from './index'
-import { toast } from '@codex-proxy/ui'
+import { ZNotification } from '@codex-proxy/ui'
 import { ApiError, isSessionRequired } from './error'
 
 // 会话失效是后端业务事实，登录凭据错误和 403 不清除已有会话
@@ -54,7 +54,7 @@ function expireSession(error: ApiError, config: RequestConfig, generation: numbe
     const alreadyHandled = unauthorizedHandled
     handleUnauthorizedOnce()
     if (!config.silent && !alreadyHandled)
-      toast.error(error.message)
+      ZNotification.error({ message: error.message })
   }
   throw error
 }
diff --git a/frontend/src/components/AccountGroupCheckboxGrid.vue b/frontend/src/components/AccountGroupCheckboxGrid.vue
index 92912fdd2..72d0e5a0c 100644
--- a/frontend/src/components/AccountGroupCheckboxGrid.vue
+++ b/frontend/src/components/AccountGroupCheckboxGrid.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { AccountGroupRef } from '@/api'
 
-import { BaseCheckbox } from '@codex-proxy/ui'
+import { ZCheckbox } from '@codex-proxy/ui'
 
 withDefaults(
   defineProps<{
@@ -35,10 +35,9 @@ function updateGroup(groupId: string, selected: boolean) {
     >
       <span class="flex min-w-0 items-center gap-2.5">
         <span class="size-3.5 shrink-0 rounded-sm" :style="{ backgroundColor: group.color }" />
-        <BaseCheckbox
+        <ZCheckbox
           :model-value="selectedGroupIds.includes(group.id)"
           :label="group.name"
-          show-label
           :disabled="disabled || loading"
           @update:model-value="updateGroup(group.id, $event)"
         />
diff --git a/frontend/src/components/ApiKeyConfigModal.vue b/frontend/src/components/ApiKeyConfigModal.vue
index 1b40a4d85..e0f2b31f9 100644
--- a/frontend/src/components/ApiKeyConfigModal.vue
+++ b/frontend/src/components/ApiKeyConfigModal.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { BaseButton, BaseIconButton, BaseModal, BaseScrollbar, BaseSegmented, BaseSwitch } from '@codex-proxy/ui'
+import { ZButton, ZDialog, ZIconButton, ZScrollbar, ZSegmented, ZSwitch } from '@codex-proxy/ui'
 
 import { Apple, Copy, Monitor, Upload } from '@lucide/vue'
 import { computed, shallowRef } from 'vue'
@@ -52,18 +52,18 @@ function importToCcs() {
 </script>
 
 <template>
-  <BaseModal
+  <ZDialog
     v-model="open"
     :title="title"
     description="保存或合并下方配置后重启 Codex"
-    size="lg"
+    width="48rem"
   >
     <div class="flex flex-col gap-5">
       <div class="flex flex-wrap items-center justify-between gap-3">
-        <BaseSegmented v-model="activePlatform" label="配置平台" :options="platformOptions" />
-        <BaseSwitch
+        <ZSegmented v-model="activePlatform" aria-label="配置平台" :options="platformOptions" />
+        <ZSwitch
           v-model="websocketEnabled"
-          label="切换 WebSocket 配置"
+          aria-label="切换 WebSocket 配置"
           active-text="WS"
           inactive-text="WS"
           inline-prompt
@@ -78,34 +78,34 @@ function importToCcs() {
           >
             {{ configPath }}
           </span>
-          <BaseIconButton
-            variant="secondary"
-            size="sm"
-            label="复制"
+          <ZIconButton
+            variant="solid"
+            size="small"
+            aria-label="复制"
             @click="emit('copy', codexConfig)"
           >
             <Copy class="size-3.5" />
-          </BaseIconButton>
+          </ZIconButton>
         </div>
-        <BaseScrollbar max-height="calc(100dvh - 21rem)">
+        <ZScrollbar max-height="calc(100dvh - 21rem)">
           <div class="mx-3 mb-3 rounded-cp bg-cp-bg-container px-3.5 py-3 shadow-cp-tertiary">
             <pre
               class="m-0 whitespace-pre-wrap wrap-break-word font-mono text-cp-sm leading-[1.65] font-emphasis text-cp-text"
               v-text="codexConfig"
             />
           </div>
-        </BaseScrollbar>
+        </ZScrollbar>
       </section>
     </div>
 
     <template #footer>
-      <BaseButton variant="secondary" :disabled="!keyValue" @click="importToCcs">
+      <ZButton :disabled="!keyValue" @click="importToCcs">
         <Upload class="size-4" />
         导入 CCSwitch
-      </BaseButton>
-      <BaseButton variant="primary" @click="open = false">
+      </ZButton>
+      <ZButton type="primary" @click="open = false">
         关闭
-      </BaseButton>
+      </ZButton>
     </template>
-  </BaseModal>
+  </ZDialog>
 </template>
diff --git a/frontend/src/components/AppAboutModal.vue b/frontend/src/components/AppAboutModal.vue
index 2786203d1..cc7743e2c 100644
--- a/frontend/src/components/AppAboutModal.vue
+++ b/frontend/src/components/AppAboutModal.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { Github } from '@boxicons/vue'
-import { BaseModal } from '@codex-proxy/ui'
+import { ZDialog } from '@codex-proxy/ui'
 import { ExternalLink } from '@lucide/vue'
 
 import { computed } from 'vue'
@@ -49,7 +49,7 @@ const linkItems = [
 </script>
 
 <template>
-  <BaseModal v-model="open" title="关于" size="sm">
+  <ZDialog v-model="open" title="关于" width="28rem">
     <div class="grid gap-5">
       <section class="flex min-w-0 items-center gap-3">
         <span
@@ -108,5 +108,5 @@ const linkItems = [
         {{ versionLine }}
       </p>
     </div>
-  </BaseModal>
+  </ZDialog>
 </template>
diff --git a/frontend/src/components/AppBrandMark.vue b/frontend/src/components/AppBrandMark.vue
index f82e17a6b..baa40fcc6 100644
--- a/frontend/src/components/AppBrandMark.vue
+++ b/frontend/src/components/AppBrandMark.vue
@@ -31,7 +31,7 @@ const mistGradientId = `${id}-brand-mist`
       </radialGradient>
     </defs>
 
-    <rect class="fill-[var(--cp-brand-mark-bg)]" x="48" y="48" width="416" height="416" rx="88" />
+    <rect class="fill-(--cp-brand-mark-bg)" x="48" y="48" width="416" height="416" rx="88" />
     <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="36">
       <path d="M156 307A112 112 0 0 1 307 156" />
       <path d="M356 205A112 112 0 0 1 205 356" />
diff --git a/frontend/src/components/ProviderFilter.vue b/frontend/src/components/ProviderFilter.vue
index cb8fe11f8..1aba937a5 100644
--- a/frontend/src/components/ProviderFilter.vue
+++ b/frontend/src/components/ProviderFilter.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { BaseSegmented } from '@codex-proxy/ui'
+import { ZSegmented } from '@codex-proxy/ui'
 import { LayoutGrid } from '@lucide/vue'
 import { formatProviderLabel, PROVIDER_IDS, providerIcon } from '@/utils/providers'
 
@@ -14,9 +14,9 @@ const options = [
 <template>
   <div class="flex min-w-0 max-w-full items-center gap-1">
     <div class="min-w-0 overflow-x-auto">
-      <BaseSegmented
+      <ZSegmented
         v-model="provider"
-        label="按平台筛选"
+        aria-label="按平台筛选"
         display="icon"
         :style="{ width: `${options.length * 40 + 4}px` }"
         :options="options"
diff --git a/frontend/src/components/RequestLocationFields.vue b/frontend/src/components/RequestLocationFields.vue
index c6c1f4b70..5615e3382 100644
--- a/frontend/src/components/RequestLocationFields.vue
+++ b/frontend/src/components/RequestLocationFields.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { RequestLocation } from '@/api'
-import { BaseFormItem, BaseInput } from '@codex-proxy/ui'
+import { ZFormItem, ZInput } from '@codex-proxy/ui'
 
 defineProps<{ disabled?: boolean }>()
 const location = defineModel<RequestLocation>({ required: true })
@@ -12,17 +12,17 @@ function update(field: keyof RequestLocation, value: string) {
 
 <template>
   <div class="grid gap-4 sm:grid-cols-2">
-    <BaseFormItem label="国家代码" required>
-      <BaseInput :model-value="location.country" :disabled="disabled" aria-label="国家代码" placeholder="请输入两位国家代码" maxlength="2" @update:model-value="update('country', $event)" />
-    </BaseFormItem>
-    <BaseFormItem label="地区" required>
-      <BaseInput :model-value="location.region" :disabled="disabled" aria-label="地区" placeholder="请输入地区" maxlength="128" @update:model-value="update('region', $event)" />
-    </BaseFormItem>
-    <BaseFormItem label="城市" required>
-      <BaseInput :model-value="location.city" :disabled="disabled" aria-label="城市" placeholder="请输入城市" maxlength="128" @update:model-value="update('city', $event)" />
-    </BaseFormItem>
-    <BaseFormItem label="IANA 时区" required>
-      <BaseInput :model-value="location.timezone" :disabled="disabled" aria-label="IANA 时区" placeholder="请输入 IANA 时区" @update:model-value="update('timezone', $event)" />
-    </BaseFormItem>
+    <ZFormItem label="国家代码" required>
+      <ZInput :model-value="location.country" :disabled="disabled" aria-label="国家代码" placeholder="请输入两位国家代码" maxlength="2" @update:model-value="update('country', $event)" />
+    </ZFormItem>
+    <ZFormItem label="地区" required>
+      <ZInput :model-value="location.region" :disabled="disabled" aria-label="地区" placeholder="请输入地区" maxlength="128" @update:model-value="update('region', $event)" />
+    </ZFormItem>
+    <ZFormItem label="城市" required>
+      <ZInput :model-value="location.city" :disabled="disabled" aria-label="城市" placeholder="请输入城市" maxlength="128" @update:model-value="update('city', $event)" />
+    </ZFormItem>
+    <ZFormItem label="IANA 时区" required>
+      <ZInput :model-value="location.timezone" :disabled="disabled" aria-label="IANA 时区" placeholder="请输入 IANA 时区" @update:model-value="update('timezone', $event)" />
+    </ZFormItem>
   </div>
 </template>
diff --git a/frontend/src/components/client-profile/ClientProfileEditor.vue b/frontend/src/components/client-profile/ClientProfileEditor.vue
index 6be724fdc..cc5da7d92 100644
--- a/frontend/src/components/client-profile/ClientProfileEditor.vue
+++ b/frontend/src/components/client-profile/ClientProfileEditor.vue
@@ -4,7 +4,7 @@ import type {
   ClientProfilePreview,
   ClientProfileSelection,
 } from '@/api/modules/settings/profiles'
-import { BaseButton, BaseSegmented } from '@codex-proxy/ui'
+import { ZButton, ZSegmented } from '@codex-proxy/ui'
 import { computed, onMounted, shallowRef, watch } from 'vue'
 import { getClientProfileOptions, previewClientProfile } from '@/api/modules/settings/profiles'
 import { errorMessage } from '@/utils/operation'
@@ -95,9 +95,9 @@ onMounted(() => load())
 <template>
   <div class="grid min-w-0 gap-4">
     <div v-if="allowInherit" class="flex flex-wrap items-center justify-between gap-3">
-      <BaseSegmented
+      <ZSegmented
         v-model="profileSource"
-        label="客户端身份来源"
+        aria-label="客户端身份来源"
         class="shrink-0"
         :options="[
           { label: '全局配置', value: 'global' },
@@ -109,9 +109,9 @@ onMounted(() => load())
     </div>
     <div v-if="loadError" role="alert" class="flex flex-wrap items-center justify-between gap-3 text-cp text-cp-error">
       <span>预设加载失败：{{ loadError }}</span>
-      <BaseButton size="sm" :disabled="disabled || loading" @click="load()">
+      <ZButton size="small" :disabled="disabled || loading" @click="load()">
         重试
-      </BaseButton>
+      </ZButton>
     </div>
     <ClientProfilePresetFields
       v-if="!inherited"
diff --git a/frontend/src/components/client-profile/ClientProfilePresetFields.vue b/frontend/src/components/client-profile/ClientProfilePresetFields.vue
index 75ed975af..42427f7c2 100644
--- a/frontend/src/components/client-profile/ClientProfilePresetFields.vue
+++ b/frontend/src/components/client-profile/ClientProfilePresetFields.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { ClientProfilePreset, ClientProfilePreview, ClientProfileSelection, CustomClientProfileSelection, PresetClientProfileSelection } from '@/api/modules/settings/profiles'
-import { BaseFormItem, BaseInput, BaseSelect, BaseTextarea } from '@codex-proxy/ui'
+import { ZFormItem, ZInput, ZSelect, ZTextarea } from '@codex-proxy/ui'
 import { computed, shallowRef } from 'vue'
 
 const props = withDefaults(defineProps<{
@@ -115,11 +115,11 @@ const userAgent = computed({
 <template>
   <div class="grid gap-4">
     <div class="grid gap-4" :class="preset?.client === 'cli' && !custom ? 'sm:grid-cols-3' : 'sm:grid-cols-2'">
-      <BaseFormItem label="客户端预设">
-        <BaseSelect v-model="selectedPreset" class="w-full" :options="presetOptions" :placeholder="custom ? '使用自定义用户代理' : undefined" :disabled="disabled || custom || !presets.length" />
-      </BaseFormItem>
-      <BaseFormItem v-if="preset?.client === 'cli' && !custom" label="CLI 入口">
-        <BaseSelect
+      <ZFormItem label="客户端预设">
+        <ZSelect v-model="selectedPreset" class="w-full" :options="presetOptions" :placeholder="custom ? '使用自定义用户代理' : undefined" :disabled="disabled || custom || !presets.length" />
+      </ZFormItem>
+      <ZFormItem v-if="preset?.client === 'cli' && !custom" label="CLI 入口">
+        <ZSelect
           v-model="cliEntry"
           class="w-full"
           :options="[
@@ -129,9 +129,9 @@ const userAgent = computed({
           ]"
           :disabled="disabled"
         />
-      </BaseFormItem>
-      <BaseFormItem label="版本策略">
-        <BaseSelect
+      </ZFormItem>
+      <ZFormItem label="版本策略">
+        <ZSelect
           v-model="versionMode"
           class="w-full"
           :options="[
@@ -140,14 +140,14 @@ const userAgent = computed({
           ]"
           :disabled="disabled"
         />
-      </BaseFormItem>
+      </ZFormItem>
     </div>
     <p v-if="!custom && currentPreset?.reason" class="m-0 text-cp-sm text-cp-text-secondary">
       {{ currentPreset.reason }}
     </p>
     <div v-if="!custom" class="grid gap-4 sm:grid-cols-2">
-      <BaseFormItem label="版本滞后" :error="versionLagError">
-        <BaseInput
+      <ZFormItem label="版本滞后" :error="versionLagError">
+        <ZInput
           v-model="versionLag"
           aria-label="版本滞后"
           type="number"
@@ -158,10 +158,10 @@ const userAgent = computed({
           :placeholder="`滞后 1～${maxVersionLag} 个版本，留空不滞后`"
           :disabled="disabled"
         />
-      </BaseFormItem>
+      </ZFormItem>
       <div class="grid gap-4" :class="{ 'sm:grid-cols-2': preset?.client === 'desktop' }">
-        <BaseFormItem label="终端标识">
-          <BaseInput
+        <ZFormItem label="终端标识">
+          <ZInput
             v-model="terminal"
             :disabled="disabled"
             aria-label="终端标识"
@@ -171,9 +171,9 @@ const userAgent = computed({
             autocomplete="off"
             class="font-mono"
           />
-        </BaseFormItem>
-        <BaseFormItem v-if="preset?.client === 'desktop'" label="系统版本">
-          <BaseInput
+        </ZFormItem>
+        <ZFormItem v-if="preset?.client === 'desktop'" label="系统版本">
+          <ZInput
             v-model="osVersion"
             :disabled="disabled"
             aria-label="系统版本"
@@ -183,11 +183,11 @@ const userAgent = computed({
             autocomplete="off"
             class="font-mono"
           />
-        </BaseFormItem>
+        </ZFormItem>
       </div>
     </div>
     <template v-if="custom">
-      <BaseTextarea
+      <ZTextarea
         v-model="userAgent"
         :rows="3"
         :disabled="disabled || (!model?.mode && previewing)"
diff --git a/frontend/src/components/client-profile/ClientProfilePreviewPanel.vue b/frontend/src/components/client-profile/ClientProfilePreviewPanel.vue
index 064587a52..a07076801 100644
--- a/frontend/src/components/client-profile/ClientProfilePreviewPanel.vue
+++ b/frontend/src/components/client-profile/ClientProfilePreviewPanel.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { ClientProfilePreview } from '@/api/modules/settings/profiles'
-import { BaseSkeleton } from '@codex-proxy/ui'
+import { ZSkeleton } from '@codex-proxy/ui'
 
 defineProps<{
   preview?: Pick<ClientProfilePreview, 'userAgent' | 'versionSource' | 'checkedAtDisplay' | 'error'> & { versionLag?: number | null }
@@ -25,10 +25,10 @@ defineProps<{
   >
     <template v-if="previewing">
       <div class="flex h-lh items-center text-cp-sm" role="status" aria-label="正在解析客户端身份">
-        <BaseSkeleton shape="text" class="w-4/5" aria-hidden="true" />
+        <ZSkeleton shape="text" class="w-4/5" aria-hidden="true" />
       </div>
       <div class="flex h-lh items-center text-cp-xs" aria-hidden="true">
-        <BaseSkeleton shape="text" class="w-52 max-w-full" />
+        <ZSkeleton shape="text" class="w-52 max-w-full" />
       </div>
     </template>
     <template v-else-if="preview">
diff --git a/frontend/src/components/client-profile/ProviderRequestProfilesEditor.vue b/frontend/src/components/client-profile/ProviderRequestProfilesEditor.vue
index 11338a6c9..c83816f2b 100644
--- a/frontend/src/components/client-profile/ProviderRequestProfilesEditor.vue
+++ b/frontend/src/components/client-profile/ProviderRequestProfilesEditor.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { ClientProfileSelection, ProviderRequestProfile, ProviderRequestProfiles, XaiClientProfileSelection } from '@/api/modules/settings/profiles'
-import { BaseSegmented } from '@codex-proxy/ui'
+import { ZSegmented } from '@codex-proxy/ui'
 import { computed, shallowRef } from 'vue'
 import { formatProviderLabel, PROVIDER_IDS, providerIcon } from '@/utils/providers'
 import ClientProfileEditor from './ClientProfileEditor.vue'
@@ -48,10 +48,10 @@ function updateProfile(providerId: string, value: ProviderRequestProfile | null)
   <div class="grid min-w-0 gap-4">
     <div v-if="!allowInherit" class="flex flex-wrap items-start justify-between gap-3">
       <slot name="heading" />
-      <BaseSegmented
+      <ZSegmented
         v-model="provider"
         class="ml-auto max-w-full shrink-0"
-        label="客户端身份 Provider"
+        aria-label="客户端身份 Provider"
         :options="providerOptions"
         :disabled="disabled"
         :style="providerSelectorStyle"
@@ -66,10 +66,10 @@ function updateProfile(providerId: string, value: ProviderRequestProfile | null)
       :disabled="disabled"
     >
       <template #source-extra>
-        <BaseSegmented
+        <ZSegmented
           v-model="provider"
           class="max-w-full shrink-0"
-          label="上游身份平台"
+          aria-label="上游身份平台"
           :options="providerOptions"
           :disabled="disabled"
           :style="providerSelectorStyle"
@@ -85,10 +85,10 @@ function updateProfile(providerId: string, value: ProviderRequestProfile | null)
       :disabled="disabled"
     >
       <template #source-extra>
-        <BaseSegmented
+        <ZSegmented
           v-model="provider"
           class="max-w-full shrink-0"
-          label="上游身份平台"
+          aria-label="上游身份平台"
           :options="providerOptions"
           :disabled="disabled"
           :style="providerSelectorStyle"
diff --git a/frontend/src/components/client-profile/XaiClientProfileEditor.vue b/frontend/src/components/client-profile/XaiClientProfileEditor.vue
index 22f6b77c0..34bd51a97 100644
--- a/frontend/src/components/client-profile/XaiClientProfileEditor.vue
+++ b/frontend/src/components/client-profile/XaiClientProfileEditor.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { XaiClientProfilePreview, XaiClientProfileSelection } from '@/api/modules/settings/profiles'
-import { BaseButton, BaseFormItem, BaseInput, BaseSegmented, BaseSelect } from '@codex-proxy/ui'
+import { ZButton, ZFormItem, ZInput, ZSegmented, ZSelect } from '@codex-proxy/ui'
 import { computed, onMounted, shallowRef, watch } from 'vue'
 import { getXaiClientProfileOptions, previewXaiClientProfile } from '@/api/modules/settings/profiles'
 import { errorMessage } from '@/utils/operation'
@@ -98,9 +98,9 @@ onMounted(() => props.allowInherit && void load())
 <template>
   <div class="grid min-w-0 gap-4">
     <div v-if="allowInherit" class="flex flex-wrap items-center justify-between gap-3">
-      <BaseSegmented
+      <ZSegmented
         v-model="source"
-        label="xAI 客户端身份来源"
+        aria-label="xAI 客户端身份来源"
         class="shrink-0"
         :options="[{ label: '全局配置', value: 'global' }, { label: '独立配置', value: 'independent' }]"
         :disabled="disabled || !globalConfiguration"
@@ -109,26 +109,26 @@ onMounted(() => props.allowInherit && void load())
     </div>
     <div v-if="loadError" role="alert" class="flex items-center justify-between gap-3 text-cp text-cp-error">
       <span>全局配置加载失败：{{ loadError }}</span>
-      <BaseButton size="sm" @click="load">
+      <ZButton size="small" @click="load">
         重试
-      </BaseButton>
+      </ZButton>
     </div>
     <template v-if="model">
       <div class="grid gap-4 sm:grid-cols-2">
-        <BaseFormItem label="客户端类型">
-          <BaseInput model-value="Grok CLI" readonly :disabled="disabled" />
-        </BaseFormItem>
-        <BaseFormItem label="版本策略">
-          <BaseSelect v-model="versionMode" class="w-full" :disabled="disabled" :options="[{ label: '跟随最新版本', value: 'latest' }, { label: '自定义版本', value: 'fixed' }]" />
-        </BaseFormItem>
+        <ZFormItem label="客户端类型">
+          <ZInput model-value="Grok CLI" readonly :disabled="disabled" />
+        </ZFormItem>
+        <ZFormItem label="版本策略">
+          <ZSelect v-model="versionMode" class="w-full" :disabled="disabled" :options="[{ label: '跟随最新版本', value: 'latest' }, { label: '自定义版本', value: 'fixed' }]" />
+        </ZFormItem>
       </div>
       <div v-if="model.versionMode === 'fixed'" class="grid gap-4 sm:grid-cols-2">
-        <BaseFormItem label="Grok CLI 版本" required>
-          <BaseInput :model-value="model.clientVersion ?? ''" :disabled="disabled" placeholder="例如：1.0.13" @update:model-value="updateField('clientVersion', $event)" />
-        </BaseFormItem>
-        <BaseFormItem v-for="field in fields" :key="field.key" :label="field.label" required>
-          <BaseInput :model-value="model[field.key]" :disabled="disabled" @update:model-value="updateField(field.key, $event)" />
-        </BaseFormItem>
+        <ZFormItem label="Grok CLI 版本" required>
+          <ZInput :model-value="model.clientVersion ?? ''" :disabled="disabled" placeholder="例如：1.0.13" @update:model-value="updateField('clientVersion', $event)" />
+        </ZFormItem>
+        <ZFormItem v-for="field in fields" :key="field.key" :label="field.label" required>
+          <ZInput :model-value="model[field.key]" :disabled="disabled" @update:model-value="updateField(field.key, $event)" />
+        </ZFormItem>
       </div>
     </template>
     <ClientProfilePreviewPanel :preview="preview" :previewing="previewing" :needs-version-input="needsVersionInput" :error="previewError" />
diff --git a/frontend/src/components/schema-form/index.vue b/frontend/src/components/schema-form/index.vue
index b040fdafa..71d9dc0a5 100644
--- a/frontend/src/components/schema-form/index.vue
+++ b/frontend/src/components/schema-form/index.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { InputField } from './schema'
-import { BaseForm, BaseFormItem, BaseIconButton, BaseInput, BasePopover, BaseSelect, BaseTextarea } from '@codex-proxy/ui'
+import { ZForm, ZFormItem, ZIconButton, ZInput, ZPopover, ZSelect, ZTextarea } from '@codex-proxy/ui'
 import { Braces, Info, List } from '@lucide/vue'
 import { computed, nextTick, shallowRef, useTemplateRef } from 'vue'
 import { parseJsonObject } from '@/utils/data'
@@ -94,18 +94,18 @@ defineExpose({ focusField })
 
 <template>
   <div v-if="!empty" ref="root" class="grid gap-3">
-    <BaseForm v-if="showJson">
-      <BaseFormItem label="输入内容" :error="error">
+    <ZForm v-if="showJson">
+      <ZFormItem label="输入内容" :error="error">
         <template #extra>
-          <BaseIconButton v-if="fields !== null" label="使用表单" size="sm" variant="secondary" :disabled="disabled || Boolean(error) || hasExtra || incompatibleValue" @click="jsonMode = false">
+          <ZIconButton v-if="fields !== null" aria-label="使用表单" size="small" variant="solid" :disabled="disabled || Boolean(error) || hasExtra || incompatibleValue" @click="jsonMode = false">
             <List class="size-4" />
-          </BaseIconButton>
+          </ZIconButton>
         </template>
-        <BaseTextarea v-model="text" :rows="8" :disabled="disabled" spellcheck="false" autocomplete="off" data-schema-json-control />
-      </BaseFormItem>
-    </BaseForm>
-    <BaseForm v-else>
-      <BaseFormItem
+        <ZTextarea v-model="text" :rows="8" :disabled="disabled" spellcheck="false" autocomplete="off" data-schema-json-control />
+      </ZFormItem>
+    </ZForm>
+    <ZForm v-else>
+      <ZFormItem
         v-for="(field, index) in fields"
         :key="field.key"
         :label="field.label"
@@ -113,32 +113,32 @@ defineExpose({ focusField })
         :error="fieldErrors?.[field.key]"
       >
         <template v-if="field.description" #label-extra>
-          <BasePopover trigger="hover-click" placement="top-start">
-            <template #trigger>
-              <BaseIconButton :label="`${field.label}说明`" class="size-3.5!" :title="undefined">
+          <ZPopover trigger="hover-click" placement="top-start">
+            <template #reference>
+              <ZIconButton :aria-label="`${field.label}说明`" class="size-3.5!" :title="undefined">
                 <Info class="size-3.5" />
-              </BaseIconButton>
+              </ZIconButton>
             </template>
             <p class="m-0 max-w-72 p-3 text-cp-xs leading-relaxed text-cp-text-secondary">
               {{ field.description }}
             </p>
-          </BasePopover>
+          </ZPopover>
         </template>
         <template v-if="index === 0" #extra>
-          <BaseIconButton label="编辑 JSON" size="sm" variant="secondary" :disabled="disabled" @click="jsonMode = true">
+          <ZIconButton aria-label="编辑 JSON" size="small" variant="solid" :disabled="disabled" @click="jsonMode = true">
             <Braces class="size-4" />
-          </BaseIconButton>
+          </ZIconButton>
         </template>
-        <BaseSelect
+        <ZSelect
           v-if="field.values || field.type === 'boolean'"
           :model-value="fieldValue(field)"
           :options="fieldOptions(field)"
           :disabled="disabled"
           :data-schema-control="field.key"
           class="w-full"
-          @update:model-value="update(field, $event)"
+          @update:model-value="update(field, $event ?? '')"
         />
-        <BaseInput
+        <ZInput
           v-else
           :model-value="fieldValue(field)"
           :type="field.secret ? 'password' : 'text'"
@@ -148,7 +148,7 @@ defineExpose({ focusField })
           autocomplete="off"
           @update:model-value="update(field, $event)"
         />
-      </BaseFormItem>
-    </BaseForm>
+      </ZFormItem>
+    </ZForm>
   </div>
 </template>
diff --git a/frontend/src/components/usage/RequestHealthTimelineCard.vue b/frontend/src/components/usage/RequestHealthTimelineCard.vue
index 56ea1ded2..d7f4bdea6 100644
--- a/frontend/src/components/usage/RequestHealthTimelineCard.vue
+++ b/frontend/src/components/usage/RequestHealthTimelineCard.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { DashboardHealthTimeline, DashboardHealthTimelinePoint } from '@/api'
-import { BaseCard, BasePopover } from '@codex-proxy/ui'
+import { ZCard, ZPopover } from '@codex-proxy/ui'
 
 import { usePreferredReducedMotion } from '@vueuse/core'
 import { gsap } from 'gsap'
@@ -183,7 +183,7 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <BaseCard as="article" :title="timeline.title" :description="timeline.description" class="w-full">
+  <ZCard as="article" :title="timeline.title" :description="timeline.description" class="w-full">
     <template #actions>
       <div class="flex w-full flex-wrap items-center justify-between gap-x-4 gap-y-2">
         <div
@@ -211,18 +211,18 @@ onBeforeUnmount(() => {
 
     <template #body>
       <div>
-        <BasePopover
+        <ZPopover
           v-model="popoverOpen"
           trigger="hover"
           placement="top"
           :offset="12"
-          :anchor-element="activeAnchor"
+          :reference-element="activeAnchor"
           :disabled="!activePoint"
           animate-position
           :arrow-surface-class="healthPopoverArrowSurfaceClasses"
           class="min-w-0 w-full"
         >
-          <template #trigger>
+          <template #reference>
             <div
               ref="timelineGrid" class="grid w-full grid-cols-[repeat(var(--timeline-columns),minmax(0,1fr))] items-end gap-x-0.5 gap-y-1 sm:grid-cols-[repeat(var(--timeline-columns-wide),minmax(0,1fr))]"
               :style="{ '--timeline-columns': Math.max(1, Math.ceil(points.length / 2)), '--timeline-columns-wide': Math.max(1, points.length) }"
@@ -263,8 +263,8 @@ onBeforeUnmount(() => {
           <div class="w-72 overflow-hidden rounded-cp-lg">
             <HealthTimelinePointPopover v-if="activePoint" :point="activePoint" />
           </div>
-        </BasePopover>
+        </ZPopover>
       </div>
     </template>
-  </BaseCard>
+  </ZCard>
 </template>
diff --git a/frontend/src/components/usage/UsageDetailPopover.vue b/frontend/src/components/usage/UsageDetailPopover.vue
index 579ad5294..b12b586a1 100644
--- a/frontend/src/components/usage/UsageDetailPopover.vue
+++ b/frontend/src/components/usage/UsageDetailPopover.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { BasePopover } from '@codex-proxy/ui'
+import { ZPopover } from '@codex-proxy/ui'
 
 import { Info } from '@lucide/vue'
 
@@ -12,11 +12,11 @@ defineProps<{
 </script>
 
 <template>
-  <BasePopover
+  <ZPopover
     trigger="hover"
     placement="right"
   >
-    <template #trigger>
+    <template #reference>
       <button
         type="button"
         class="inline-flex size-4 items-center justify-center rounded-full outline-none focus-visible:ring-2 focus-visible:ring-cp-control-outline"
@@ -35,5 +35,5 @@ defineProps<{
       </p>
       <slot />
     </div>
-  </BasePopover>
+  </ZPopover>
 </template>
diff --git a/frontend/src/components/usage/UsageRecordsTable.vue b/frontend/src/components/usage/UsageRecordsTable.vue
index 9e5423bdf..8ae0d9beb 100644
--- a/frontend/src/components/usage/UsageRecordsTable.vue
+++ b/frontend/src/components/usage/UsageRecordsTable.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { BaseTableColumn } from '@codex-proxy/ui'
+import type { TableColumn } from '@codex-proxy/ui'
 import type { UsageListRecord } from '@/api'
 
-import { BaseTable } from '@codex-proxy/ui'
+import { ZTable } from '@codex-proxy/ui'
 import { Minimize2 } from '@lucide/vue'
 import AccountPlanBadge from '@/components/account/AccountPlanBadge.vue'
 import ProviderIconGroup from '@/components/ProviderIconGroup.vue'
@@ -22,7 +22,7 @@ import {
 // 使用记录表只负责该领域的单元格呈现；筛选与分页由页面组合。
 withDefaults(
   defineProps<{
-    columns: BaseTableColumn<UsageListRecord>[]
+    columns: TableColumn<UsageListRecord>[]
     rows: UsageListRecord[]
     loading?: boolean
     emptyText?: string
@@ -35,9 +35,9 @@ withDefaults(
 </script>
 
 <template>
-  <BaseTable
+  <ZTable
     :columns="columns"
-    :rows="rows"
+    :data="rows"
     :loading="loading"
     :empty-text="emptyText"
   >
@@ -142,5 +142,5 @@ withDefaults(
     <template v-if="$slots.actions" #actions="scope">
       <slot name="actions" v-bind="scope" />
     </template>
-  </BaseTable>
+  </ZTable>
 </template>
diff --git a/frontend/src/components/usage/shared/columns.ts b/frontend/src/components/usage/shared/columns.ts
index 6f33ff5df..9d9a09a16 100644
--- a/frontend/src/components/usage/shared/columns.ts
+++ b/frontend/src/components/usage/shared/columns.ts
@@ -18,7 +18,7 @@ export const usageRecordColumns = defineTableColumns<UsageListRecord>([
     kind: 'status',
     size: 'md',
     fixedWidth: true,
-    format: (value: unknown) => formatProviderLabel(typeof value === 'string' ? value : null),
+    formatter: (value: unknown) => formatProviderLabel(typeof value === 'string' ? value : null),
   },
   { key: 'model', label: '模型', kind: 'custom', size: 'xl' },
   { key: 'reasoningEffort', label: '推理强度', kind: 'status', size: 'md', align: 'left' },
diff --git a/frontend/src/composables/useAsyncAction.ts b/frontend/src/composables/useAsyncAction.ts
index baf126aba..6dfbe8fb7 100644
--- a/frontend/src/composables/useAsyncAction.ts
+++ b/frontend/src/composables/useAsyncAction.ts
@@ -1,4 +1,4 @@
-import { toast } from '@codex-proxy/ui'
+import { ZNotification } from '@codex-proxy/ui'
 
 import { shallowRef } from 'vue'
 import { ApiError } from '@/api/request'
@@ -42,7 +42,7 @@ export function useAsyncAction(defaults: AsyncActionRunOptions = {}) {
 
       const message = resolveErrorText(error, options.errorText)
       if (message) {
-        toast.error(message)
+        ZNotification.error({ message })
       }
 
       if (options.rethrow) {
diff --git a/frontend/src/composables/useCopyText.ts b/frontend/src/composables/useCopyText.ts
index ac0e3814a..006deb650 100644
--- a/frontend/src/composables/useCopyText.ts
+++ b/frontend/src/composables/useCopyText.ts
@@ -1,4 +1,4 @@
-import { toast } from '@codex-proxy/ui'
+import { ZNotification } from '@codex-proxy/ui'
 
 import { useClipboard } from '@vueuse/core'
 import { errorMessage } from '@/utils/operation'
@@ -11,7 +11,7 @@ interface CopyTextOptions {
   errorFromException?: boolean
 }
 
-// 剪贴板复制 + toast 反馈；空值与错误文案语义由调用方按站点配置。
+// 剪贴板复制 + notification 反馈；空值与错误文案语义由调用方按站点配置。
 export function useCopyText() {
   // 普通 HTTP 页面没有 Clipboard API，启用 VueUse 内置的兼容复制路径。
   const { copy } = useClipboard({ legacy: true })
@@ -19,15 +19,15 @@ export function useCopyText() {
   return async function copyText(value: string, options: CopyTextOptions) {
     if (!value) {
       if (options.emptyErrorText)
-        toast.error(options.emptyErrorText)
+        ZNotification.error({ message: options.emptyErrorText })
       return
     }
     try {
       await copy(value)
-      toast.success(options.successText)
+      ZNotification.success({ message: options.successText })
     }
     catch (error: unknown) {
-      toast.error(options.errorFromException ? errorMessage(error, '复制失败') : '复制失败')
+      ZNotification.error({ message: options.errorFromException ? errorMessage(error, '复制失败') : '复制失败' })
     }
   }
 }
diff --git a/frontend/src/directives/loading.ts b/frontend/src/directives/loading.ts
deleted file mode 100644
index ade203238..000000000
--- a/frontend/src/directives/loading.ts
+++ /dev/null
@@ -1,156 +0,0 @@
-import type { Directive, DirectiveBinding } from 'vue'
-
-type LoadingBindingValue
-  = | boolean
-    | {
-      loading?: boolean
-      text?: string
-      preserveContent?: boolean
-    }
-
-interface LoadingState {
-  overlay: HTMLDivElement
-  previousPosition: string
-  managedPosition: boolean
-  preserveContent: boolean
-}
-
-type LoadingElement = HTMLElement & {
-  __cpLoading?: LoadingState
-}
-
-const OVERLAY_BASE_CLASS = [
-  'absolute',
-  'inset-0',
-  'z-50',
-  'grid',
-  'min-h-18',
-  'place-items-center',
-  'rounded-[inherit]',
-].join(' ')
-const OVERLAY_MASK_CLASS = 'bg-cp-bg-container/82 backdrop-blur-[4px]'
-const PANEL_CLASS = [
-  'inline-flex',
-  'min-h-10',
-  'items-center',
-  'gap-2.5',
-  'rounded-xl',
-  'py-2.25',
-  'pr-3.5',
-  'pl-3',
-  'text-xs',
-  'leading-[1.15]',
-  'font-heavy',
-  'text-cp-text-secondary',
-].join(' ')
-const MARK_CLASS = [
-  'inline-block',
-  'size-4',
-  'rounded-full',
-  'animate-spin',
-  'bg-[radial-gradient(circle_at_center,var(--cp-color-bg-container)_0_44%,transparent_46%),conic-gradient(from_0deg,var(--cp-color-primary)_0deg_105deg,var(--cp-color-primary-hover)_105deg_200deg,var(--cp-color-fill-tertiary)_200deg_360deg)]',
-].join(' ')
-const LABEL_CLASS = 'whitespace-nowrap'
-
-function normalizeBinding(value: LoadingBindingValue | undefined) {
-  if (typeof value === 'object' && value !== null) {
-    return {
-      loading: Boolean(value.loading),
-      text: value.text || '加载中',
-      preserveContent: Boolean(value.preserveContent),
-    }
-  }
-
-  return {
-    loading: Boolean(value),
-    text: '加载中',
-    preserveContent: false,
-  }
-}
-
-function overlayClass(preserveContent: boolean) {
-  return preserveContent ? OVERLAY_BASE_CLASS : `${OVERLAY_BASE_CLASS} ${OVERLAY_MASK_CLASS}`
-}
-
-function createOverlay(text: string, preserveContent: boolean) {
-  const overlay = document.createElement('div')
-  overlay.className = overlayClass(preserveContent)
-  overlay.setAttribute('role', 'status')
-  overlay.setAttribute('aria-live', 'polite')
-
-  const panel = document.createElement('div')
-  panel.className = PANEL_CLASS
-
-  const mark = document.createElement('span')
-  mark.className = MARK_CLASS
-
-  const label = document.createElement('span')
-  label.className = LABEL_CLASS
-  label.dataset.loadingLabel = ''
-  label.textContent = text
-
-  panel.append(mark, label)
-  overlay.append(panel)
-
-  return overlay
-}
-
-function showLoading(element: LoadingElement, text: string, preserveContent: boolean) {
-  if (element.__cpLoading) {
-    const label = element.__cpLoading.overlay.querySelector<HTMLElement>('[data-loading-label]')
-    if (label)
-      label.textContent = text
-    if (element.__cpLoading.preserveContent !== preserveContent) {
-      element.__cpLoading.overlay.className = overlayClass(preserveContent)
-      element.__cpLoading.preserveContent = preserveContent
-    }
-    return
-  }
-
-  const previousPosition = element.style.position
-  const managedPosition = window.getComputedStyle(element).position === 'static'
-  if (managedPosition) {
-    element.style.position = 'relative'
-  }
-
-  const overlay = createOverlay(text, preserveContent)
-  element.append(overlay)
-  element.setAttribute('aria-busy', 'true')
-  element.classList.add('overflow-hidden')
-  element.__cpLoading = {
-    overlay,
-    previousPosition,
-    managedPosition,
-    preserveContent,
-  }
-}
-
-function hideLoading(element: LoadingElement) {
-  const state = element.__cpLoading
-  if (!state)
-    return
-
-  state.overlay.remove()
-  element.removeAttribute('aria-busy')
-  element.classList.remove('overflow-hidden')
-  if (state.managedPosition) {
-    element.style.position = state.previousPosition
-  }
-  element.__cpLoading = undefined
-}
-
-function syncLoading(element: LoadingElement, binding: DirectiveBinding<LoadingBindingValue>) {
-  const { loading, text, preserveContent } = normalizeBinding(binding.value)
-  if (loading) {
-    showLoading(element, text, preserveContent)
-  }
-  else {
-    hideLoading(element)
-  }
-}
-
-export const loading: Directive<LoadingElement, LoadingBindingValue> = {
-  mounted: syncLoading,
-  updated: syncLoading,
-  beforeUnmount: hideLoading,
-}
diff --git a/frontend/src/layout/components/AppSidebar.vue b/frontend/src/layout/components/AppSidebar.vue
index 85a9dc984..079cde98e 100644
--- a/frontend/src/layout/components/AppSidebar.vue
+++ b/frontend/src/layout/components/AppSidebar.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { PluginManagementView } from '@/api'
 
-import { BaseIconButton, BaseMotionIcon, BaseScrollbar } from '@codex-proxy/ui'
+import { ZIconButton, ZMotionIcon, ZScrollbar } from '@codex-proxy/ui'
 import {
   ArrowUpCircle,
   Blocks,
@@ -391,12 +391,12 @@ onBeforeUnmount(() => {
       class="mx-4 mt-6 grid h-12 shrink-0 grid-cols-[44px_minmax(0,1fr)] items-center"
       :class="isCollapsed ? 'w-11 justify-start' : 'self-stretch gap-3'"
     >
-      <BaseMotionIcon
+      <ZMotionIcon
         variant="brand"
         class="inline-flex size-11 items-center justify-center relative -top-0.5 rounded-cp"
       >
         <AppBrandMark class="block size-11 select-none" />
-      </BaseMotionIcon>
+      </ZMotionIcon>
       <span v-show="brandLabelVisible" ref="brandLabelEl" class="grid min-w-33 content-center overflow-hidden">
         <strong class="text-base leading-[1.1] font-heavy text-cp-text"> Codex Proxy </strong>
         <span class="mt-1.5 flex h-4.5 min-w-0 items-center gap-2">
@@ -420,7 +420,7 @@ onBeforeUnmount(() => {
       </span>
     </div>
 
-    <BaseScrollbar class="my-6 w-full flex-1">
+    <ZScrollbar class="my-6 w-full flex-1">
       <div class="px-4">
         <nav class="relative grid gap-3" :class="isCollapsed ? 'mx-auto w-11.5' : 'w-full'" aria-label="主导航">
           <span
@@ -546,7 +546,7 @@ onBeforeUnmount(() => {
           </template>
         </nav>
       </div>
-    </BaseScrollbar>
+    </ZScrollbar>
 
     <div class="mx-4 mb-6 shrink-0" :class="isCollapsed ? 'w-11' : 'self-stretch'">
       <div
@@ -562,54 +562,52 @@ onBeforeUnmount(() => {
         </span>
 
         <div class="flex items-center" :class="isCollapsed ? 'grid gap-1' : 'gap-1'">
-          <BaseIconButton
+          <ZIconButton
             v-if="isCollapsed && hasUpdate"
-            variant="success"
-            size="md"
-            :label="updateButtonLabel"
+            type="success" variant="plain"
+            size="default"
+            :aria-label="updateButtonLabel"
             @click="openSystemUpdate"
           >
             <ArrowUpCircle :size="19" />
-          </BaseIconButton>
+          </ZIconButton>
 
-          <BaseIconButton
-            :size="isCollapsed ? 'md' : 'sm'"
-            label="退出登录"
-            variant="destructive"
+          <ZIconButton
+            :size="isCollapsed ? 'default' : 'small'"
+            aria-label="退出登录"
+            type="danger"
             @click="handleLogout"
           >
             <LogOut :size="isCollapsed ? 19 : 18" />
-          </BaseIconButton>
+          </ZIconButton>
 
-          <BaseIconButton
-            variant="ghost"
-            :size="isCollapsed ? 'md' : 'sm'"
-            :label="themeToggleLabel"
+          <ZIconButton
+            :size="isCollapsed ? 'default' : 'small'"
+            :aria-label="themeToggleLabel"
             @click="toggleTheme($event)"
           >
             <Sun v-if="effectiveTheme === 'dark'" :size="isCollapsed ? 19 : 18" />
             <Moon v-else :size="isCollapsed ? 19 : 18" />
-          </BaseIconButton>
+          </ZIconButton>
 
-          <BaseIconButton variant="ghost" :size="isCollapsed ? 'md' : 'sm'" label="关于" @click="emit('openAbout')">
+          <ZIconButton :size="isCollapsed ? 'default' : 'small'" aria-label="关于" @click="emit('openAbout')">
             <Info :size="isCollapsed ? 19 : 18" />
-          </BaseIconButton>
+          </ZIconButton>
 
-          <BaseIconButton v-if="mobile" variant="ghost" size="sm" label="关闭侧边栏" @click="emit('close')">
+          <ZIconButton v-if="mobile" size="small" aria-label="关闭侧边栏" @click="emit('close')">
             <PanelLeftClose :size="18" />
-          </BaseIconButton>
+          </ZIconButton>
 
-          <BaseIconButton
+          <ZIconButton
             v-else
-            variant="ghost"
-            :size="isCollapsed ? 'md' : 'sm'"
+            :size="isCollapsed ? 'default' : 'small'"
             data-sidebar-toggle
-            :label="isCollapsed ? '展开侧边栏' : '收缩侧边栏'"
+            :aria-label="isCollapsed ? '展开侧边栏' : '收缩侧边栏'"
             @click="emit('toggle')"
           >
             <PanelLeftOpen v-if="isCollapsed" :size="19" />
             <PanelLeftClose v-else :size="18" />
-          </BaseIconButton>
+          </ZIconButton>
         </div>
       </div>
     </div>
diff --git a/frontend/src/layout/components/system-update-modal/index.vue b/frontend/src/layout/components/system-update-modal/index.vue
index 2f20454d8..3f8ccdc58 100644
--- a/frontend/src/layout/components/system-update-modal/index.vue
+++ b/frontend/src/layout/components/system-update-modal/index.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { SystemRestartPlan, SystemUpdateChannel, SystemUpdateDetail } from '@/api'
-import { BaseButton, BaseConfirmModal, BaseMarkdown, BaseModal, BasePopover, BaseScrollbar, BaseSegmented, BaseSkeleton, toast } from '@codex-proxy/ui'
+import { ZButton, ZConfirmDialog, ZDialog, ZMarkdown, ZNotification, ZPopover, ZScrollbar, ZSegmented, ZSkeleton } from '@codex-proxy/ui'
 
 import {
   ArrowUpCircle,
@@ -49,7 +49,7 @@ const {
 } = storeToRefs(systemUpdateStore)
 const { loadSystem, checkUpdates, changeChannel, updateNow, restartNow } = systemUpdateStore
 
-const updateLogScrollbar = useTemplateRef<InstanceType<typeof BaseScrollbar>>('updateLogScrollbar')
+const updateLogScrollbar = useTemplateRef<InstanceType<typeof ZScrollbar>>('updateLogScrollbar')
 const updateConfirmOpen = shallowRef(false)
 const updateConfirmInfo = shallowRef<SystemUpdateDetail | null>(null)
 const updateConfirmPreviousTarget = shallowRef('')
@@ -125,10 +125,10 @@ async function handleCheckUpdates(force = true) {
   try {
     const data = await checkUpdates(force)
     if (data?.warning) {
-      toast.error(data.warning)
+      ZNotification.error({ message: data.warning })
       return
     }
-    toast.success(data?.hasUpdate ? '发现可用更新' : '当前没有可用更新')
+    ZNotification.success({ message: data?.hasUpdate ? '发现可用更新' : '当前没有可用更新' })
   }
   catch {}
 }
@@ -142,16 +142,16 @@ async function handleUpdateRequest() {
   try {
     const data = await checkUpdates(true)
     if (data?.warning) {
-      toast.error(data.warning)
+      ZNotification.error({ message: data.warning })
       return
     }
     if (!data?.hasUpdate || !canUpdate.value) {
-      toast.success('当前没有可用更新')
+      ZNotification.success({ message: '当前没有可用更新' })
       return
     }
     const remoteTargetVersion = normalizeSystemVersion(data.latestVersion)
     if (!remoteTargetVersion) {
-      toast.error('远端目标版本为空')
+      ZNotification.error({ message: '远端目标版本为空' })
       return
     }
     if (previousTargetVersion && previousTargetVersion !== remoteTargetVersion) {
@@ -172,7 +172,7 @@ async function runConfirmedUpdate(targetVersion: string, channel: SystemUpdateCh
   try {
     const result = await updateNow(targetVersion, channel)
     if (result) {
-      toast.success('更新已开始')
+      ZNotification.success({ message: '更新已开始' })
     }
   }
   catch {}
@@ -204,7 +204,7 @@ async function handleRestart() {
     await restartNow(restartPlan.value)
   }
   catch (error: unknown) {
-    toast.error(errorMessage(error, '重启前检查失败'))
+    ZNotification.error({ message: errorMessage(error, '重启前检查失败') })
   }
   finally {
     checkingRestart.value = false
@@ -220,7 +220,7 @@ async function handleConfirmRestart() {
   }
   catch (error: unknown) {
     restartConfirmOpen.value = false
-    toast.error(errorMessage(error, '重启失败，请重新检查'))
+    ZNotification.error({ message: errorMessage(error, '重启失败，请重新检查') })
   }
 }
 
@@ -243,13 +243,13 @@ watch(
 </script>
 
 <template>
-  <BaseModal
+  <ZDialog
     v-model="open"
     title="系统更新"
     description="检查版本、查看发布说明并执行在线更新"
-    tone="success"
-    size="lg"
-    :dismissible="!restarting"
+    type="success"
+    width="48rem"
+    :show-close="!restarting" :close-on-click-modal="!restarting" :close-on-press-escape="!restarting"
   >
     <template #icon>
       <ArrowUpCircle class="size-4.5 text-cp-success" />
@@ -305,7 +305,7 @@ watch(
               class="mt-2 mb-0 h-[1em] truncate font-mono text-cp leading-none font-bold text-cp-text"
               :title="item.title || item.value"
             >
-              <BaseSkeleton
+              <ZSkeleton
                 v-if="loading || ((checking || changingChannel) && item.key === 'latest')"
                 class="h-full w-20 max-w-full"
                 aria-label="正在检查版本"
@@ -326,14 +326,14 @@ watch(
         >
           {{ updateError || updateInfo?.warning }}
         </p>
-        <BasePopover v-if="lastFailedOperation" placement="bottom-start" class="justify-self-start">
-          <template #trigger>
-            <BaseButton variant="ghost" size="sm">
+        <ZPopover v-if="lastFailedOperation" placement="bottom-start" class="justify-self-start">
+          <template #reference>
+            <ZButton variant="text" size="small">
               <template #icon>
                 <History class="size-3.5" />
               </template>
               上次操作失败
-            </BaseButton>
+            </ZButton>
           </template>
           <div class="grid w-80 max-w-[calc(100vw-2rem)] gap-2 p-3 text-cp-sm">
             <div v-if="lastFailedOperation.targetVersion || lastFailedOperation.finishedAt" class="flex flex-wrap gap-x-3 gap-y-1 text-cp-xs text-cp-text-quaternary">
@@ -344,7 +344,7 @@ watch(
               {{ lastFailedOperation.error || lastFailedOperation.message || '操作失败' }}
             </p>
           </div>
-        </BasePopover>
+        </ZPopover>
       </section>
 
       <section
@@ -356,26 +356,26 @@ watch(
             发布说明
           </p>
           <span class="font-mono text-cp-xs font-emphasis text-cp-text-quaternary">
-            <BaseSkeleton v-if="releaseNotesLoading" shape="text" class="w-14" aria-hidden="true" />
+            <ZSkeleton v-if="releaseNotesLoading" shape="text" class="w-14" aria-hidden="true" />
             <template v-else>{{ presentation.releaseVersion }}</template>
           </span>
         </div>
-        <BaseScrollbar class="-mx-4" max-height="160px">
+        <ZScrollbar class="-mx-4" max-height="160px">
           <div
             class="relative px-4"
             :class="{ 'min-h-40': releaseNotesLoading && !hasReleaseNotes }"
             :aria-busy="releaseNotesLoading"
           >
             <div :class="{ invisible: releaseNotesLoading }" :aria-hidden="releaseNotesLoading || undefined">
-              <BaseMarkdown :source="updateInfo?.notes" />
+              <ZMarkdown :source="updateInfo?.notes" />
             </div>
             <div v-if="releaseNotesLoading" class="absolute inset-x-4 top-0 grid h-full content-start gap-3 overflow-hidden py-1" aria-hidden="true">
-              <BaseSkeleton shape="text" class="w-20" />
-              <BaseSkeleton shape="text" class="w-4/5" />
-              <BaseSkeleton shape="text" class="w-3/5" />
+              <ZSkeleton shape="text" class="w-20" />
+              <ZSkeleton shape="text" class="w-4/5" />
+              <ZSkeleton shape="text" class="w-3/5" />
             </div>
           </div>
-        </BaseScrollbar>
+        </ZScrollbar>
       </section>
 
       <section
@@ -401,7 +401,7 @@ watch(
           </span>
         </header>
 
-        <BaseScrollbar
+        <ZScrollbar
           ref="updateLogScrollbar"
           height="260px"
         >
@@ -423,27 +423,27 @@ watch(
               </p>
             </div>
           </div>
-        </BaseScrollbar>
+        </ZScrollbar>
       </section>
     </div>
 
     <template #footer>
       <div class="mr-auto flex min-w-0 basis-full items-center gap-2 sm:basis-auto">
-        <BaseSkeleton v-if="loading" class="h-8 w-52" aria-label="正在读取运行通道" />
-        <BaseSegmented
+        <ZSkeleton v-if="loading" class="h-8 w-52" aria-label="正在读取运行通道" />
+        <ZSegmented
           v-else
           :model-value="selectedChannel"
           :options="channelOptions"
-          label="更新通道"
-          size="sm"
+          aria-label="更新通道"
+          size="small"
           :disabled="!canChangeChannel || preparingUpdate || updateConfirmOpen"
           @update:model-value="handleChannelChange"
         />
-        <BasePopover placement="top-start">
-          <template #trigger>
-            <BaseButton variant="ghost" size="sm" square aria-label="更新通道说明">
+        <ZPopover placement="top-start">
+          <template #reference>
+            <ZButton variant="text" size="small" square aria-label="更新通道说明">
               <CircleHelp class="size-4" />
-            </BaseButton>
+            </ZButton>
           </template>
           <div class="grid w-72 gap-2 p-3 text-cp-sm text-cp-text-secondary">
             <p v-for="channel in availableChannels" :key="channel" class="m-0">
@@ -454,10 +454,9 @@ watch(
               选择仅用于本次检查，重新打开时按运行版本选择通道，不会自动安装或降级
             </p>
           </div>
-        </BasePopover>
+        </ZPopover>
       </div>
-      <BaseButton
-        variant="secondary"
+      <ZButton
         :loading="checking"
         :disabled="loading || updating || restarting || changingChannel || preparingUpdate"
         @click="handleCheckUpdates(true)"
@@ -469,10 +468,10 @@ watch(
           <RefreshCw class="size-3.5" />
         </template>
         检查更新
-      </BaseButton>
-      <BaseButton
+      </ZButton>
+      <ZButton
         v-if="needRestart"
-        variant="primary"
+        type="primary"
         :loading="restarting || checkingRestart"
         :disabled="loading || updating || restartConfirmOpen"
         @click="handleRestart"
@@ -481,10 +480,10 @@ watch(
           <Power class="size-4" />
         </template>
         {{ presentation.restartButtonLabel }}
-      </BaseButton>
-      <BaseButton
+      </ZButton>
+      <ZButton
         v-else-if="hasUpdate || updating"
-        variant="primary"
+        type="primary"
         :loading="preparingUpdate || updating"
         :disabled="!canUpdate || preparingUpdate"
         @click="handleUpdateRequest"
@@ -493,11 +492,11 @@ watch(
           <Download class="size-4" />
         </template>
         {{ updating ? '更新中' : '下载并更新' }}
-      </BaseButton>
+      </ZButton>
     </template>
-  </BaseModal>
+  </ZDialog>
 
-  <BaseConfirmModal
+  <ZConfirmDialog
     v-model="restartConfirmOpen"
     title="插件兼容性提醒"
     description="重启后保留启用配置，逐个尝试启动插件"
@@ -520,9 +519,9 @@ watch(
         </li>
       </ul>
     </div>
-  </BaseConfirmModal>
+  </ZConfirmDialog>
 
-  <BaseConfirmModal
+  <ZConfirmDialog
     v-model="updateConfirmOpen"
     title="发现新的更新版本"
     description="所选通道的最新版本已变化"
@@ -552,5 +551,5 @@ watch(
         点击确认后弹窗会关闭，并按远端最新目标版本开始更新
       </p>
     </div>
-  </BaseConfirmModal>
+  </ZConfirmDialog>
 </template>
diff --git a/frontend/src/layout/index.vue b/frontend/src/layout/index.vue
index 3a4f521ea..eb44184df 100644
--- a/frontend/src/layout/index.vue
+++ b/frontend/src/layout/index.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { BaseScrollbar } from '@codex-proxy/ui'
+import { ZScrollbar } from '@codex-proxy/ui'
 import { storeToRefs } from 'pinia'
 import { nextTick, onBeforeUnmount, onMounted, ref, shallowRef, watch } from 'vue'
 
@@ -18,7 +18,7 @@ const { sidebarCollapsed } = storeToRefs(uiStore)
 const { version } = storeToRefs(systemUpdateStore)
 const { toggleSidebar } = uiStore
 const route = useRoute()
-const pageScrollbarRef = ref<InstanceType<typeof BaseScrollbar> | null>(null)
+const pageScrollbarRef = ref<InstanceType<typeof ZScrollbar> | null>(null)
 const mobileSidebarOpen = shallowRef(false)
 const aboutOpen = shallowRef(false)
 const systemUpdateOpen = shallowRef(false)
@@ -60,13 +60,13 @@ watch(
     />
     <FloatingSidebarToggle v-if="!mobileSidebarOpen" @open="openMobileSidebar" />
     <main class="relative isolate h-dvh min-w-0 flex-1 overflow-hidden">
-      <BaseScrollbar ref="pageScrollbarRef">
+      <ZScrollbar ref="pageScrollbarRef">
         <div class="flex min-h-full min-w-0 flex-col p-4 min-[961px]:p-6">
           <RouterView v-slot="{ Component }">
             <component :is="Component" class="min-h-0 flex-1" />
           </RouterView>
         </div>
-      </BaseScrollbar>
+      </ZScrollbar>
     </main>
 
     <Teleport to="body">
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index 12343f747..1ee4db9f9 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -1,7 +1,7 @@
+import { vLoading } from '@codex-proxy/ui'
 import { createApp } from 'vue'
 import App from './App.vue'
 
-import { loading } from './directives/loading'
 import { authPlugin } from './plugins/auth'
 import { router } from './router'
 import { pinia } from './stores'
@@ -14,7 +14,7 @@ import './styles/index.css'
 
 const app = createApp(App)
 
-app.directive('loading', loading)
+app.directive('loading', vLoading)
 app.use(pinia)
 
 useThemeStore(pinia).initializeTheme()
diff --git a/frontend/src/views/accounts/components/AccountApiKeyFields.vue b/frontend/src/views/accounts/components/AccountApiKeyFields.vue
index 51e970699..bd40ac4f8 100644
--- a/frontend/src/views/accounts/components/AccountApiKeyFields.vue
+++ b/frontend/src/views/accounts/components/AccountApiKeyFields.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { ApiKeyAccountForm } from '../utils/upstreamApiKey'
-import { BaseFormItem, BaseInput, BaseSegmented } from '@codex-proxy/ui'
+import { ZFormItem, ZInput, ZSegmented } from '@codex-proxy/ui'
 
 defineProps<{ disabled?: boolean, editing?: boolean }>()
 const form = defineModel<ApiKeyAccountForm>({ required: true })
@@ -12,20 +12,20 @@ const transportOptions = [
 
 <template>
   <div class="grid gap-4">
-    <BaseFormItem v-if="!editing" label="账号名称" required>
-      <BaseInput v-model="form.name" placeholder="输入上游名称" :disabled="disabled" />
-    </BaseFormItem>
-    <BaseFormItem label="Base URL" required>
+    <ZFormItem v-if="!editing" label="账号名称" required>
+      <ZInput v-model="form.name" placeholder="输入上游名称" :disabled="disabled" />
+    </ZFormItem>
+    <ZFormItem label="Base URL" required>
       <template #extra>
         <span class="text-cp-xs text-cp-text-quaternary" title="填写 API 前缀，接口路径会自动追加">API 前缀</span>
       </template>
-      <BaseInput v-model="form.base_url" type="url" placeholder="https://api.example.com/v1" :disabled="disabled" autocomplete="off" />
-    </BaseFormItem>
-    <BaseFormItem label="API Key" :required="!editing">
-      <BaseInput v-model="form.apiKey" type="password" :placeholder="editing ? '留空保留当前密钥' : '输入上游密钥'" :disabled="disabled" autocomplete="new-password" />
-    </BaseFormItem>
-    <BaseFormItem label="传输方式">
-      <BaseSegmented v-model="form.transport" label="传输方式" :options="transportOptions" :disabled="disabled" title="WS 优先需要上游支持 Responses WebSocket" />
-    </BaseFormItem>
+      <ZInput v-model="form.base_url" type="url" placeholder="https://api.example.com/v1" :disabled="disabled" autocomplete="off" />
+    </ZFormItem>
+    <ZFormItem label="API Key" :required="!editing">
+      <ZInput v-model="form.apiKey" type="password" :placeholder="editing ? '留空保留当前密钥' : '输入上游密钥'" :disabled="disabled" autocomplete="new-password" />
+    </ZFormItem>
+    <ZFormItem label="传输方式">
+      <ZSegmented v-model="form.transport" aria-label="传输方式" :options="transportOptions" :disabled="disabled" title="WS 优先需要上游支持 Responses WebSocket" />
+    </ZFormItem>
   </div>
 </template>
diff --git a/frontend/src/views/accounts/components/AccountBatchEditModal.vue b/frontend/src/views/accounts/components/AccountBatchEditModal.vue
index 87c52cf1c..a95a4b2f8 100644
--- a/frontend/src/views/accounts/components/AccountBatchEditModal.vue
+++ b/frontend/src/views/accounts/components/AccountBatchEditModal.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { AccountGroupRef, AccountModelAccess } from '@/api'
 
-import { BaseButton, BaseModal } from '@codex-proxy/ui'
+import { ZButton, ZDialog } from '@codex-proxy/ui'
 import AccountSettingsFields from './AccountSettingsFields.vue'
 
 defineProps<{
@@ -28,12 +28,12 @@ const selectedGroupIds = defineModel<string[]>('selectedGroupIds', { required: t
 </script>
 
 <template>
-  <BaseModal
+  <ZDialog
     v-model="open"
     title="批量编辑账号"
     :description="`编辑 ${selectedCount} 个账号`"
-    size="lg"
-    :dismissible="!saving"
+    width="48rem"
+    :show-close="!saving" :close-on-click-modal="!saving" :close-on-press-escape="!saving"
   >
     <div class="grid gap-5">
       <AccountSettingsFields
@@ -53,17 +53,17 @@ const selectedGroupIds = defineModel<string[]>('selectedGroupIds', { required: t
     </div>
 
     <template #footer>
-      <BaseButton variant="secondary" :disabled="saving" @click="open = false">
+      <ZButton :disabled="saving" @click="open = false">
         取消
-      </BaseButton>
-      <BaseButton
-        variant="primary"
+      </ZButton>
+      <ZButton
+        type="primary"
         :loading="saving"
         :disabled="selectedCount === 0 || groupsLoading || !hasChanges"
         @click="emit('save')"
       >
         保存更改
-      </BaseButton>
+      </ZButton>
     </template>
-  </BaseModal>
+  </ZDialog>
 </template>
diff --git a/frontend/src/views/accounts/components/AccountConnectionTestModal.vue b/frontend/src/views/accounts/components/AccountConnectionTestModal.vue
index ac2516aef..e97ab9fa6 100644
--- a/frontend/src/views/accounts/components/AccountConnectionTestModal.vue
+++ b/frontend/src/views/accounts/components/AccountConnectionTestModal.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { useAccountConnectionTest } from '../composables/useAccountConnectionTest'
 
-import { BaseButton, BaseIconButton, BaseModal, BaseSelect } from '@codex-proxy/ui'
+import { ZButton, ZDialog, ZIconButton, ZSelect } from '@codex-proxy/ui'
 import { RefreshCw } from '@lucide/vue'
 import AccountStatusBadge from './account-status-badge/index.vue'
 import AccountIdentityCell from './AccountIdentityCell.vue'
@@ -42,12 +42,12 @@ function connectionLogClass(tone: string) {
 </script>
 
 <template>
-  <BaseModal
+  <ZDialog
     v-model="open"
     title="测试连接"
     description="验证账号凭据、身份绑定与上游模型端点是否可用"
-    tone="info"
-    size="lg"
+    type="info"
+    width="48rem"
   >
     <div v-if="account" class="flex flex-col gap-4">
       <section
@@ -73,10 +73,9 @@ function connectionLogClass(tone: string) {
             <span class="text-cp-sm font-heavy text-cp-text-quaternary">
               测试模型
             </span>
-            <BaseIconButton
-              variant="ghost"
-              size="sm"
-              label="刷新上游模型"
+            <ZIconButton
+              size="small"
+              aria-label="刷新上游模型"
               :loading="refreshingModels"
               :disabled="status === 'running' || loadingModels"
               @click="emit('refreshModels')"
@@ -85,9 +84,9 @@ function connectionLogClass(tone: string) {
                 <RefreshCw class="size-3.5 animate-spin motion-reduce:animate-none" />
               </template>
               <RefreshCw class="size-3.5" />
-            </BaseIconButton>
+            </ZIconButton>
           </div>
-          <BaseSelect
+          <ZSelect
             v-model="selectedModel"
             aria-label="测试模型"
             :options="modelOptions"
@@ -212,17 +211,17 @@ function connectionLogClass(tone: string) {
     </div>
 
     <template #footer>
-      <BaseButton variant="secondary" @click="open = false">
+      <ZButton @click="open = false">
         关闭
-      </BaseButton>
-      <BaseButton
-        variant="primary"
+      </ZButton>
+      <ZButton
+        type="primary"
         :loading="status === 'running'"
         :disabled="!account || loadingModels || refreshingModels || !selectedModel"
         @click="emit('test')"
       >
         {{ logs.length > 0 || error ? '重新测试' : '开始测试' }}
-      </BaseButton>
+      </ZButton>
     </template>
-  </BaseModal>
+  </ZDialog>
 </template>
diff --git a/frontend/src/views/accounts/components/AccountEditModal.vue b/frontend/src/views/accounts/components/AccountEditModal.vue
index 2f4746af9..2a11e1c7c 100644
--- a/frontend/src/views/accounts/components/AccountEditModal.vue
+++ b/frontend/src/views/accounts/components/AccountEditModal.vue
@@ -3,7 +3,7 @@ import type { ApiKeyAccountForm } from '../utils/upstreamApiKey'
 
 import type { Account, AccountGroupRef, AccountModelAccess } from '@/api'
 
-import { BaseButton, BaseFormItem, BaseModal, BaseSegmented, BaseTextarea } from '@codex-proxy/ui'
+import { ZButton, ZDialog, ZFormItem, ZSegmented, ZTextarea } from '@codex-proxy/ui'
 import AccountPlanBadge from '@/components/account/AccountPlanBadge.vue'
 import ProviderIconGroup from '@/components/ProviderIconGroup.vue'
 import { isOpenAiApiKeyAccount, isOpenAiOAuthAccount } from '../utils/upstreamApiKey'
@@ -42,11 +42,11 @@ const selectedGroupIds = defineModel<string[]>('selectedGroupIds', { required: t
 </script>
 
 <template>
-  <BaseModal
+  <ZDialog
     v-model="open"
     title="编辑账号"
-    size="md-wide"
-    :dismissible="!saving"
+    width="42rem"
+    :show-close="!saving" :close-on-click-modal="!saving" :close-on-press-escape="!saving"
   >
     <div v-if="account" class="grid gap-5">
       <div
@@ -66,15 +66,15 @@ const selectedGroupIds = defineModel<string[]>('selectedGroupIds', { required: t
         </div>
       </div>
 
-      <BaseFormItem v-if="isOpenAiOAuthAccount(account)" label="上游传输方式">
+      <ZFormItem v-if="isOpenAiOAuthAccount(account)" label="上游传输方式">
         <p v-if="configurationLoading" role="status" class="m-0 text-cp-sm text-cp-text-secondary">
           正在读取上游设置…
         </p>
         <p v-else-if="!configurationReady" role="alert" class="m-0 text-cp-sm text-cp-error">
           传输方式读取失败，其他设置仍可保存
         </p>
-        <BaseSegmented v-else v-model="oauthTransport" label="上游传输方式" :options="transportOptions" :disabled="saving" />
-      </BaseFormItem>
+        <ZSegmented v-else v-model="oauthTransport" aria-label="上游传输方式" :options="transportOptions" :disabled="saving" />
+      </ZFormItem>
 
       <section v-if="isOpenAiApiKeyAccount(account)" class="grid gap-4">
         <h3 class="m-0 text-cp font-heavy text-cp-text">
@@ -105,29 +105,29 @@ const selectedGroupIds = defineModel<string[]>('selectedGroupIds', { required: t
         :account-id="account.id"
       />
 
-      <BaseFormItem label="备注">
-        <BaseTextarea
+      <ZFormItem label="备注">
+        <ZTextarea
           v-model="notes"
           :rows="3"
           :maxlength="500"
           placeholder="最多 500 字，留空可清除备注"
           :disabled="saving"
         />
-      </BaseFormItem>
+      </ZFormItem>
     </div>
 
     <template #footer>
-      <BaseButton variant="secondary" :disabled="saving" @click="open = false">
+      <ZButton :disabled="saving" @click="open = false">
         取消
-      </BaseButton>
-      <BaseButton
-        variant="primary"
+      </ZButton>
+      <ZButton
+        type="primary"
         :loading="saving"
         :disabled="!account || groupsLoading || (isOpenAiApiKeyAccount(account) && !configurationReady)"
         @click="emit('save')"
       >
         保存更改
-      </BaseButton>
+      </ZButton>
     </template>
-  </BaseModal>
+  </ZDialog>
 </template>
diff --git a/frontend/src/views/accounts/components/AccountFilters.vue b/frontend/src/views/accounts/components/AccountFilters.vue
index 680817154..22659a29c 100644
--- a/frontend/src/views/accounts/components/AccountFilters.vue
+++ b/frontend/src/views/accounts/components/AccountFilters.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { AccountGroupRef } from '@/api'
-import { BaseButton, BaseInput, BaseSelect } from '@codex-proxy/ui'
+import { ZButton, ZInput, ZSelect } from '@codex-proxy/ui'
 
 import { Download, ListTodo, Pencil, Search, Trash2, Upload } from '@lucide/vue'
 import { computed } from 'vue'
@@ -49,7 +49,7 @@ const groupOptions = computed(() => [
     <div
       class="grid w-full min-w-0 grid-cols-2 items-center gap-2 sm:grid-cols-[minmax(0,1fr)_minmax(0,1fr)_7.75rem] xl:flex xl:w-auto xl:flex-none xl:flex-wrap xl:gap-3"
     >
-      <BaseInput
+      <ZInput
         v-model="search"
         placeholder="搜索账号"
         class="col-span-2 min-w-0 sm:col-span-3 xl:w-80 xl:flex-none"
@@ -57,16 +57,16 @@ const groupOptions = computed(() => [
         <template #prefix>
           <Search class="size-4.5 text-cp-text-tertiary" />
         </template>
-      </BaseInput>
+      </ZInput>
 
-      <BaseSelect
+      <ZSelect
         v-model="status"
         :options="accountStatusFilterOptions"
         aria-label="按账号状态筛选"
         class="w-full min-w-0 xl:w-40 xl:shrink-0"
       />
 
-      <BaseSelect
+      <ZSelect
         v-model="group"
         :options="groupOptions"
         :disabled="groupsLoading"
@@ -83,28 +83,28 @@ const groupOptions = computed(() => [
     <div
       class="grid w-full grid-cols-2 gap-2 xl:flex xl:w-auto xl:flex-wrap xl:shrink-0 xl:self-end xl:items-center xl:justify-end xl:ml-auto"
     >
-      <BaseButton
+      <ZButton
         v-if="selectedCount > 0"
-        variant="secondary"
+        type="default" variant="solid"
         class="w-full whitespace-nowrap xl:w-auto"
         @click="emit('editSelected')"
       >
         <Pencil class="size-4 text-cp-link" />
         批量编辑账号
-      </BaseButton>
-      <BaseButton
+      </ZButton>
+      <ZButton
         v-if="selectedCount > 0"
-        variant="destructive"
+        type="danger" variant="plain"
         class="w-full whitespace-nowrap xl:w-auto"
         :disabled="batchDeleting"
         @click="emit('deleteSelected')"
       >
         <Trash2 class="size-4" />
         删除选中 ({{ selectedCount }})
-      </BaseButton>
-      <BaseButton
+      </ZButton>
+      <ZButton
         v-if="selectedCount > 0"
-        variant="secondary"
+        type="default" variant="solid"
         class="w-full whitespace-nowrap xl:w-auto"
         :loading="exportingAccounts"
         :disabled="Boolean(exportDisabledReason)"
@@ -116,25 +116,25 @@ const groupOptions = computed(() => [
           <Download class="size-4" />
         </template>
         导出选中 ({{ selectedCount }})
-      </BaseButton>
+      </ZButton>
       <div
         class="col-span-2 flex min-w-0 items-center justify-end gap-2"
         :class="selectedCount > 0 ? 'w-full xl:w-auto' : 'justify-self-end'"
       >
-        <BaseButton v-if="hasImportTasks" variant="secondary" class="whitespace-nowrap" @click="emit('importTasks')">
+        <ZButton v-if="hasImportTasks" class="whitespace-nowrap" @click="emit('importTasks')">
           <ListTodo class="size-4" />
           导入任务 <span v-if="activeImportCount" class="font-mono text-cp-link">{{ activeImportCount }}</span>
-        </BaseButton>
+        </ZButton>
         <slot name="actions" />
-        <BaseButton
-          variant="primary"
+        <ZButton
+          type="primary"
           class="whitespace-nowrap"
           :class="selectedCount > 0 ? 'flex-1 xl:flex-none' : undefined"
           @click="emit('create')"
         >
           <Upload class="size-4" />
           导入账号
-        </BaseButton>
+        </ZButton>
       </div>
     </div>
   </div>
diff --git a/frontend/src/views/accounts/components/AccountModelAccessField.vue b/frontend/src/views/accounts/components/AccountModelAccessField.vue
index 259e616cb..41d46e9af 100644
--- a/frontend/src/views/accounts/components/AccountModelAccessField.vue
+++ b/frontend/src/views/accounts/components/AccountModelAccessField.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { AccountModelAccess } from '@/api'
 
-import { BaseCheckbox, BaseEmpty, BaseFormItem, BaseIconButton, BaseInput, BaseScrollbar, BaseSegmented } from '@codex-proxy/ui'
+import { ZCheckbox, ZEmpty, ZFormItem, ZIconButton, ZInput, ZScrollbar, ZSegmented } from '@codex-proxy/ui'
 import { RefreshCw, Search } from '@lucide/vue'
 import { computed, ref, watch } from 'vue'
 import { getAccountModels, refreshAccountModels } from '@/api'
@@ -110,29 +110,29 @@ watch(search, () => {
 
 <template>
   <div class="grid gap-3">
-    <BaseFormItem label="模型限制">
+    <ZFormItem label="模型限制">
       <template v-if="restricted && accountId" #extra>
-        <BaseIconButton label="刷新模型" size="sm" :loading="loading" :disabled="disabled" @click="load(true)">
+        <ZIconButton aria-label="刷新模型" size="small" :loading="loading" :disabled="disabled" @click="load(true)">
           <template #loading>
             <RefreshCw class="size-3.5 animate-spin motion-reduce:animate-none" />
           </template>
           <RefreshCw class="size-3.5" />
-        </BaseIconButton>
+        </ZIconButton>
       </template>
-      <BaseSegmented v-model="mode" class="w-80 max-w-full" label="模型限制模式" :options="modes" :disabled="disabled" />
-    </BaseFormItem>
+      <ZSegmented v-model="mode" class="w-80 max-w-full" aria-label="模型限制模式" :options="modes" :disabled="disabled" />
+    </ZFormItem>
     <template v-if="restricted">
-      <BaseInput v-model="search" aria-label="搜索或添加模型" placeholder="搜索或输入 ID，回车添加" :disabled="disabled" :aria-invalid="Boolean(inputError)" @keydown.enter.prevent="addModel">
+      <ZInput v-model="search" aria-label="搜索或添加模型" placeholder="搜索或输入 ID，回车添加" :disabled="disabled" :aria-invalid="Boolean(inputError)" @keydown.enter.prevent="addModel">
         <template #prefix>
           <Search class="size-4" aria-hidden="true" />
         </template>
-      </BaseInput>
+      </ZInput>
       <p v-if="inputError" class="m-0 text-cp-xs text-cp-error-text" role="alert">
         {{ inputError }}
       </p>
-      <BaseScrollbar v-if="models.length" max-height="15rem" class="min-w-0 -m-1">
+      <ZScrollbar v-if="models.length" max-height="15rem" class="min-w-0 -m-1">
         <div class="grid grid-cols-2 gap-2 p-1 sm:grid-cols-3" role="group" aria-label="选择模型" :aria-busy="loading || undefined">
-          <BaseCheckbox
+          <ZCheckbox
             v-for="item in models"
             :key="item.id"
             class="min-h-11 min-w-0 rounded-cp px-3 py-2.5 transition-colors duration-150 motion-reduce:transition-none"
@@ -140,21 +140,20 @@ watch(search, () => {
             :model-value="model?.models.includes(item.id) ?? false"
             :label="item.id"
             :title="item.unavailable && accountId ? `${item.id}（当前目录未返回）` : item.id"
-            show-label
             :disabled="disabled"
             @update:model-value="select(item.id, $event)"
           >
             <template #label>
               <span class="block truncate">{{ item.id }}</span>
             </template>
-          </BaseCheckbox>
+          </ZCheckbox>
         </div>
-      </BaseScrollbar>
+      </ZScrollbar>
       <p v-else-if="loading" class="m-0 py-4 text-center text-cp-sm text-cp-text-tertiary" role="status">
         加载模型中…
       </p>
-      <BaseEmpty v-else-if="!error" :title="search ? '无匹配模型' : '暂无模型'" :icon="search ? Search : undefined" size="sm" surface="none" />
-      <BaseEmpty v-if="error" title="模型列表加载失败" description="请刷新后重试" size="sm" surface="none" role="alert" />
+      <ZEmpty v-else-if="!error" :title="search ? '无匹配模型' : '暂无模型'" :icon="search ? Search : undefined" size="small" surface="none" />
+      <ZEmpty v-if="error" title="模型列表加载失败" description="请刷新后重试" size="small" surface="none" role="alert" />
     </template>
   </div>
 </template>
diff --git a/frontend/src/views/accounts/components/AccountNotesPopover.vue b/frontend/src/views/accounts/components/AccountNotesPopover.vue
index 3b8a820d7..b73142320 100644
--- a/frontend/src/views/accounts/components/AccountNotesPopover.vue
+++ b/frontend/src/views/accounts/components/AccountNotesPopover.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { BasePopover, BaseScrollbar } from '@codex-proxy/ui'
+import { ZPopover, ZScrollbar } from '@codex-proxy/ui'
 
 import { useEventListener } from '@vueuse/core'
 import { computed, shallowRef, useId, useTemplateRef, watch } from 'vue'
@@ -29,7 +29,7 @@ watch(() => props.notes, recheckOpen, { flush: 'post' })
 </script>
 
 <template>
-  <BasePopover
+  <ZPopover
     :model-value="open"
     class="min-w-0 max-w-full"
     trigger="hover-click"
@@ -38,7 +38,7 @@ watch(() => props.notes, recheckOpen, { flush: 'post' })
     :hover-delay="240"
     @update:model-value="updateOpen"
   >
-    <template #trigger>
+    <template #reference>
       <button
         type="button"
         class="inline-flex min-w-0 max-w-full touch-manipulation items-center rounded-cp-sm border-0 bg-transparent p-0 text-left text-cp-xs leading-4 text-cp-text-tertiary outline-none transition-colors hover:text-cp-primary-text focus-visible:ring-2 focus-visible:ring-cp-control-outline motion-reduce:transition-none"
@@ -53,11 +53,11 @@ watch(() => props.notes, recheckOpen, { flush: 'post' })
     </template>
 
     <section :id="detailId" class="w-max max-w-[min(20rem,calc(100vw-1rem))] overflow-hidden rounded-cp-lg" role="dialog" aria-label="账号备注">
-      <BaseScrollbar max-height="min(240px, calc(100dvh - 2rem))">
+      <ZScrollbar max-height="min(240px, calc(100dvh - 2rem))">
         <div class="px-3 py-2.5 text-cp-sm leading-5 whitespace-pre-wrap text-cp-text select-text wrap-anywhere">
           {{ notes }}
         </div>
-      </BaseScrollbar>
+      </ZScrollbar>
     </section>
-  </BasePopover>
+  </ZPopover>
 </template>
diff --git a/frontend/src/views/accounts/components/AccountOverviewCards.vue b/frontend/src/views/accounts/components/AccountOverviewCards.vue
index 168525aae..864ad7c20 100644
--- a/frontend/src/views/accounts/components/AccountOverviewCards.vue
+++ b/frontend/src/views/accounts/components/AccountOverviewCards.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { getAccounts } from '@/api'
-import { BaseCard, BaseMotionIcon } from '@codex-proxy/ui'
+import { ZCard, ZMotionIcon } from '@codex-proxy/ui'
 
 import { AlertTriangle, Gauge, ShieldCheck, Users } from '@lucide/vue'
 import { computed } from 'vue'
@@ -57,7 +57,7 @@ function overviewIconClass(tone: string) {
 
 <template>
   <div class="mt-5 grid shrink-0 grid-cols-1 gap-3 md:grid-cols-2 xl:grid-cols-4">
-    <BaseCard v-for="item in overviewItems" :key="item.label" as="article" padding="compact">
+    <ZCard v-for="item in overviewItems" :key="item.label" as="article" padding="compact">
       <div class="flex items-stretch justify-between gap-3">
         <div class="flex min-w-0 flex-col">
           <p class="m-0 text-cp-sm leading-none font-heavy text-cp-text-secondary">
@@ -70,13 +70,13 @@ function overviewIconClass(tone: string) {
             {{ item.caption }}
           </p>
         </div>
-        <BaseMotionIcon
+        <ZMotionIcon
           class="inline-flex size-9 shrink-0 items-center justify-center self-start rounded-lg"
           :class="overviewIconClass(item.tone)"
         >
           <component :is="item.icon" class="size-4.5" />
-        </BaseMotionIcon>
+        </ZMotionIcon>
       </div>
-    </BaseCard>
+    </ZCard>
   </div>
 </template>
diff --git a/frontend/src/views/accounts/components/AccountProxyField.vue b/frontend/src/views/accounts/components/AccountProxyField.vue
index a63e3dd9d..f09218e32 100644
--- a/frontend/src/views/accounts/components/AccountProxyField.vue
+++ b/frontend/src/views/accounts/components/AccountProxyField.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { BaseFormItem, BaseSelect } from '@codex-proxy/ui'
+import { ZFormItem, ZSelect } from '@codex-proxy/ui'
 import { computed } from 'vue'
 import { useProxyCatalog } from '@/composables/useProxyCatalog'
 
@@ -34,7 +34,7 @@ const selection = computed({
 </script>
 
 <template>
-  <BaseFormItem label="出站隧道" :error="error">
-    <BaseSelect v-model="selection" class="w-full" :options="options" :disabled="disabled || loading" aria-label="出站隧道" />
-  </BaseFormItem>
+  <ZFormItem label="出站隧道" :error="error">
+    <ZSelect v-model="selection" class="w-full" :options="options" :disabled="disabled || loading" aria-label="出站隧道" />
+  </ZFormItem>
 </template>
diff --git a/frontend/src/views/accounts/components/AccountSettingsFields.vue b/frontend/src/views/accounts/components/AccountSettingsFields.vue
index f3eb64829..369924069 100644
--- a/frontend/src/views/accounts/components/AccountSettingsFields.vue
+++ b/frontend/src/views/accounts/components/AccountSettingsFields.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { AccountGroupRef, AccountModelAccess } from '@/api'
-import { BaseFormItem, BaseInput, BaseSwitch } from '@codex-proxy/ui'
+import { ZFormItem, ZInput, ZSwitch } from '@codex-proxy/ui'
 import AccountGroupCheckboxGrid from '@/components/AccountGroupCheckboxGrid.vue'
 import AccountModelAccessField from './AccountModelAccessField.vue'
 import AccountProxyField from './AccountProxyField.vue'
@@ -31,16 +31,16 @@ const selectedGroupIds = defineModel<string[]>('selectedGroupIds', { required: t
     <AccountModelAccessField v-model="modelAccess" :account-id="accountId" :disabled="disabled" :allow-preserve="preserveModelAccess" />
     <div v-if="showScheduling" class="flex min-h-6 items-center justify-between gap-3">
       <span class="text-cp leading-none font-medium text-cp-text-secondary">调度</span>
-      <BaseSwitch
+      <ZSwitch
         v-model="enabled"
-        label="切换账号调度"
+        aria-label="切换账号调度"
         :disabled="disabled"
       />
     </div>
 
     <div class="grid gap-4 sm:grid-cols-2">
-      <BaseFormItem label="并发限制">
-        <BaseInput
+      <ZFormItem label="并发限制">
+        <ZInput
           v-model="concurrencyLimit"
           aria-label="账号并发限制"
           type="number"
@@ -49,9 +49,9 @@ const selectedGroupIds = defineModel<string[]>('selectedGroupIds', { required: t
           placeholder="留空使用默认值"
           :disabled="disabled"
         />
-      </BaseFormItem>
-      <BaseFormItem label="权重">
-        <BaseInput
+      </ZFormItem>
+      <ZFormItem label="权重">
+        <ZInput
           v-model="weight"
           aria-label="账号调度权重"
           type="number"
@@ -60,17 +60,17 @@ const selectedGroupIds = defineModel<string[]>('selectedGroupIds', { required: t
           placeholder="越高越优先，最大 100"
           :disabled="disabled"
         />
-      </BaseFormItem>
+      </ZFormItem>
     </div>
 
-    <BaseFormItem label="所属分组">
+    <ZFormItem label="所属分组">
       <AccountGroupCheckboxGrid
         v-model="selectedGroupIds"
         :groups="groups"
         :loading="groupsLoading"
         :disabled="disabled"
       />
-    </BaseFormItem>
+    </ZFormItem>
     <AccountProxyField v-model:mode="proxyMode" v-model:proxy-id="proxyId" :preserve="preserveProxy" :error="proxyError" :endpoint="endpoint" :account-id="accountId" :disabled="disabled" />
   </div>
 </template>
diff --git a/frontend/src/views/accounts/components/AccountTableActions.vue b/frontend/src/views/accounts/components/AccountTableActions.vue
index ed7fe8437..ccbb4e345 100644
--- a/frontend/src/views/accounts/components/AccountTableActions.vue
+++ b/frontend/src/views/accounts/components/AccountTableActions.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { Account } from '@/api'
 
-import { BaseIconButton, BaseMenuItem, BasePopover } from '@codex-proxy/ui'
+import { ZIconButton, ZMenuItem, ZPopover } from '@codex-proxy/ui'
 
 import { Download, KeyRound, MoreHorizontal, Pencil, Power, RefreshCw, RotateCcw, Trash2, Wifi } from '@lucide/vue'
 import { computed } from 'vue'
@@ -31,35 +31,33 @@ const credentialEligible = computed(() => props.account.authenticationKind === '
 
 <template>
   <div class="relative flex items-center justify-start gap-1">
-    <BaseIconButton
-      variant="ghost"
-      size="sm"
-      label="编辑账号"
+    <ZIconButton
+      size="small"
+      aria-label="编辑账号"
       @click.stop="emit('edit', account)"
     >
       <Pencil class="size-3.5 text-cp-link" />
-    </BaseIconButton>
+    </ZIconButton>
 
-    <BaseIconButton
-      variant="ghost"
-      size="sm"
-      label="删除账号"
+    <ZIconButton
+      size="small"
+      aria-label="删除账号"
       :disabled="deleting"
       @click.stop="emit('delete', account)"
     >
       <Trash2 class="size-3.5 text-cp-error" />
-    </BaseIconButton>
+    </ZIconButton>
 
-    <BasePopover placement="bottom-end">
-      <template #trigger="{ open }">
-        <BaseIconButton variant="ghost" size="sm" label="更多操作" :pressed="open">
+    <ZPopover placement="bottom-end">
+      <template #reference="{ open }">
+        <ZIconButton size="small" aria-label="更多操作" :pressed="open">
           <MoreHorizontal class="size-4" />
-        </BaseIconButton>
+        </ZIconButton>
       </template>
 
       <template #default="{ close }">
         <div class="w-40 p-1.5">
-          <BaseMenuItem
+          <ZMenuItem
             :loading="testing"
             :disabled="testing"
             @click.stop="(close(), emit('test', account))"
@@ -68,8 +66,8 @@ const credentialEligible = computed(() => props.account.authenticationKind === '
               <Wifi class="size-3.5 text-cp-text-quaternary" />
             </template>
             测试连接
-          </BaseMenuItem>
-          <BaseMenuItem
+          </ZMenuItem>
+          <ZMenuItem
             :loading="togglingScheduling"
             :disabled="togglingScheduling"
             @click.stop="(close(), emit('toggleScheduling', account))"
@@ -78,8 +76,8 @@ const credentialEligible = computed(() => props.account.authenticationKind === '
               <Power class="size-3.5 text-cp-text-quaternary" />
             </template>
             {{ account.enabled ? '停用调度' : '启用调度' }}
-          </BaseMenuItem>
-          <BaseMenuItem
+          </ZMenuItem>
+          <ZMenuItem
             v-if="credentialEligible"
             :loading="refreshing"
             :disabled="refreshing"
@@ -92,14 +90,14 @@ const credentialEligible = computed(() => props.account.authenticationKind === '
               <RefreshCw class="size-3.5 text-cp-text-quaternary" />
             </template>
             刷新令牌
-          </BaseMenuItem>
-          <BaseMenuItem v-if="credentialEligible" @click.stop="(close(), emit('reauthorize', account))">
+          </ZMenuItem>
+          <ZMenuItem v-if="credentialEligible" @click.stop="(close(), emit('reauthorize', account))">
             <template #icon>
               <KeyRound class="size-3.5 text-cp-text-quaternary" />
             </template>
             重新授权
-          </BaseMenuItem>
-          <BaseMenuItem
+          </ZMenuItem>
+          <ZMenuItem
             v-if="account.provider === 'openai' && account.authenticationKind === 'oauth'"
             :loading="downloadingCatalog"
             :disabled="downloadingCatalog"
@@ -112,8 +110,8 @@ const credentialEligible = computed(() => props.account.authenticationKind === '
               <Download class="size-3.5 text-cp-text-quaternary" />
             </template>
             下载模型目录
-          </BaseMenuItem>
-          <BaseMenuItem
+          </ZMenuItem>
+          <ZMenuItem
             :loading="recovering"
             :disabled="recovering"
             @click.stop="(close(), emit('recover', account.id))"
@@ -122,9 +120,9 @@ const credentialEligible = computed(() => props.account.authenticationKind === '
               <RotateCcw class="size-3.5 text-cp-text-quaternary" />
             </template>
             恢复状态
-          </BaseMenuItem>
+          </ZMenuItem>
         </div>
       </template>
-    </BasePopover>
+    </ZPopover>
   </div>
 </template>
diff --git a/frontend/src/views/accounts/components/AccountUsagePanel.vue b/frontend/src/views/accounts/components/AccountUsagePanel.vue
index b719d026a..093a0f3a3 100644
--- a/frontend/src/views/accounts/components/AccountUsagePanel.vue
+++ b/frontend/src/views/accounts/components/AccountUsagePanel.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { Account } from '@/api'
 
-import { BaseTable, defineTableColumns } from '@codex-proxy/ui'
+import { defineTableColumns, ZTable } from '@codex-proxy/ui'
 import { Sigma } from '@lucide/vue'
 import { computed } from 'vue'
 import { modelSuccessRateTextClass } from '../constants'
@@ -100,11 +100,11 @@ const modelUsageColumns = defineTableColumns<AccountModelUsage>([
       </div>
 
       <div class="h-56 min-w-0 xl:h-auto xl:min-h-0 xl:flex-1 xl:basis-0">
-        <BaseTable
+        <ZTable
           :columns="modelUsageColumns"
-          :rows="account.usage.models"
+          :data="account.usage.models"
           row-key="model"
-          density="compact"
+          size="small"
           empty-text="暂无模型用量"
         >
           <template #successRateDisplay="{ row }">
@@ -112,7 +112,7 @@ const modelUsageColumns = defineTableColumns<AccountModelUsage>([
               {{ row.successRateDisplay }}
             </span>
           </template>
-        </BaseTable>
+        </ZTable>
       </div>
     </div>
   </section>
diff --git a/frontend/src/views/accounts/components/account-create-modal/AccountImportFields.vue b/frontend/src/views/accounts/components/account-create-modal/AccountImportFields.vue
index a7c846067..db9f26f6f 100644
--- a/frontend/src/views/accounts/components/account-create-modal/AccountImportFields.vue
+++ b/frontend/src/views/accounts/components/account-create-modal/AccountImportFields.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { BaseButton, BaseFormItem, BaseTextarea } from '@codex-proxy/ui'
+import { ZButton, ZFormItem, ZTextarea } from '@codex-proxy/ui'
 import { Upload } from '@lucide/vue'
 import { useFileDialog } from '@vueuse/core'
 import { onScopeDispose, ref } from 'vue'
@@ -45,16 +45,16 @@ function updateText(value: string) {
 </script>
 
 <template>
-  <BaseFormItem :label="label" required :error="fileError || undefined">
+  <ZFormItem :label="label" required :error="fileError || undefined">
     <template v-if="uploadable" #extra>
-      <BaseButton size="sm" :disabled="disabled" @click="openFile()">
+      <ZButton size="small" :disabled="disabled" @click="openFile()">
         <template #icon>
           <Upload class="size-3.5" aria-hidden="true" />
         </template>
         上传文件
-      </BaseButton>
+      </ZButton>
     </template>
-    <BaseTextarea
+    <ZTextarea
       :model-value="text"
       :aria-label="label"
       :rows="9"
@@ -62,5 +62,5 @@ function updateText(value: string) {
       :disabled="disabled"
       @update:model-value="updateText"
     />
-  </BaseFormItem>
+  </ZFormItem>
 </template>
diff --git a/frontend/src/views/accounts/components/account-create-modal/AccountOAuthFields.vue b/frontend/src/views/accounts/components/account-create-modal/AccountOAuthFields.vue
index 8cd423408..6658562db 100644
--- a/frontend/src/views/accounts/components/account-create-modal/AccountOAuthFields.vue
+++ b/frontend/src/views/accounts/components/account-create-modal/AccountOAuthFields.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { AccountAuthorizationView } from '../../composables/useAccountAuthorization'
-import { BaseButton, BaseForm, BaseFormItem, BaseIconButton, BaseScrollbar, BaseTextarea } from '@codex-proxy/ui'
+import { ZButton, ZForm, ZFormItem, ZIconButton, ZScrollbar, ZTextarea } from '@codex-proxy/ui'
 import { Copy, KeyRound } from '@lucide/vue'
 import { computed } from 'vue'
 import { useCopyText } from '@/composables/useCopyText'
@@ -49,40 +49,39 @@ const statusText = computed(() => {
     </div>
 
     <div class="flex flex-wrap items-center gap-2">
-      <BaseButton
-        variant="secondary"
+      <ZButton
         :loading="loading"
         :disabled="disabled || (!authorization.flow && !canStart)"
         @click="emit('regenerate')"
       >
         {{ authUrl ? '重新生成授权链接' : '生成授权链接' }}
-      </BaseButton>
+      </ZButton>
     </div>
 
-    <BaseForm v-if="authUrl">
-      <BaseFormItem label="授权链接">
+    <ZForm v-if="authUrl">
+      <ZFormItem label="授权链接">
         <template #extra>
-          <BaseIconButton
-            variant="secondary"
-            size="sm"
+          <ZIconButton
+            variant="solid"
+            size="small"
             title="复制链接"
-            label="复制链接"
+            aria-label="复制链接"
             :disabled="disabled"
             @click="copyWithToast(authUrl, { successText: '授权链接已复制' })"
           >
             <Copy class="size-3.5" />
-          </BaseIconButton>
+          </ZIconButton>
         </template>
-        <BaseScrollbar max-height="92px">
+        <ZScrollbar max-height="92px">
           <div class="rounded-cp bg-(--cp-input-bg) px-3.5 py-3 shadow-cp-tertiary">
             <pre
               class="m-0 whitespace-pre-wrap wrap-break-word font-mono text-cp-sm leading-[1.6] font-emphasis text-cp-text-secondary"
               v-text="authUrl"
             />
           </div>
-        </BaseScrollbar>
-      </BaseFormItem>
-    </BaseForm>
+        </ZScrollbar>
+      </ZFormItem>
+    </ZForm>
 
     <p v-if="statusText" class="m-0 text-cp-sm text-cp-text-secondary" role="status">
       {{ statusText }}
@@ -91,16 +90,16 @@ const statusText = computed(() => {
       {{ authorization.error }}
     </p>
 
-    <BaseForm v-if="authorization.flow">
-      <BaseFormItem :label="callbackLabel" required>
-        <BaseTextarea
+    <ZForm v-if="authorization.flow">
+      <ZFormItem :label="callbackLabel" required>
+        <ZTextarea
           v-model="callback"
           :aria-label="callbackLabel"
           :rows="4"
           :placeholder="callbackPlaceholder"
           :disabled="disabled"
         />
-      </BaseFormItem>
-    </BaseForm>
+      </ZFormItem>
+    </ZForm>
   </div>
 </template>
diff --git a/frontend/src/views/accounts/components/account-create-modal/AccountProviderChooser.vue b/frontend/src/views/accounts/components/account-create-modal/AccountProviderChooser.vue
index 9e1dd54ae..ae49d66c0 100644
--- a/frontend/src/views/accounts/components/account-create-modal/AccountProviderChooser.vue
+++ b/frontend/src/views/accounts/components/account-create-modal/AccountProviderChooser.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { AccountCreateSource } from '../../utils/accountCreate'
-import { BaseSegmented } from '@codex-proxy/ui'
+import { ZSegmented } from '@codex-proxy/ui'
 import { LayoutGrid } from '@lucide/vue'
 import { computed } from 'vue'
 import { formatProviderLabel, PROVIDER_IDS, providerIcon } from '@/utils/providers'
@@ -26,12 +26,12 @@ const selected = computed({
 </script>
 
 <template>
-  <BaseSegmented
+  <ZSegmented
     v-model="selected"
     class="w-full"
-    label="选择账号平台"
+    aria-label="选择账号平台"
     :options="options"
     :disabled="disabled"
-    size="lg"
+    size="large"
   />
 </template>
diff --git a/frontend/src/views/accounts/components/account-create-modal/AccountSetupFields.vue b/frontend/src/views/accounts/components/account-create-modal/AccountSetupFields.vue
index 6c5cc1ac8..2d7c8cc66 100644
--- a/frontend/src/views/accounts/components/account-create-modal/AccountSetupFields.vue
+++ b/frontend/src/views/accounts/components/account-create-modal/AccountSetupFields.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { AccountCreateForm } from '../../utils/accountCreate'
 import type { AccountGroupRef } from '@/api'
-import { BaseFormItem, BaseTextarea } from '@codex-proxy/ui'
+import { ZFormItem, ZTextarea } from '@codex-proxy/ui'
 import AccountSettingsFields from '../AccountSettingsFields.vue'
 import AccountProviderChooser from './AccountProviderChooser.vue'
 
@@ -37,14 +37,14 @@ const form = defineModel<AccountCreateForm>({ required: true })
       :disabled="disabled"
       :proxy-error="proxyError"
     />
-    <BaseFormItem label="备注">
-      <BaseTextarea
+    <ZFormItem label="备注">
+      <ZTextarea
         v-model="form.notes"
         :rows="3"
         :maxlength="500"
         placeholder="最多 500 字，可不填"
         :disabled="disabled"
       />
-    </BaseFormItem>
+    </ZFormItem>
   </div>
 </template>
diff --git a/frontend/src/views/accounts/components/account-create-modal/index.vue b/frontend/src/views/accounts/components/account-create-modal/index.vue
index 89397616b..6da396bc8 100644
--- a/frontend/src/views/accounts/components/account-create-modal/index.vue
+++ b/frontend/src/views/accounts/components/account-create-modal/index.vue
@@ -4,7 +4,7 @@ import type { AccountCreateForm, AccountImportMode } from '../../utils/accountCr
 
 import type { Account, AccountGroupRef } from '@/api'
 import { Openai, Xai } from '@boxicons/vue'
-import { BaseButton, BaseIconButton, BaseModal, BaseSegmented } from '@codex-proxy/ui'
+import { ZButton, ZDialog, ZIconButton, ZSegmented } from '@codex-proxy/ui'
 import { Copy, LayoutGrid, Settings2 } from '@lucide/vue'
 import { computed } from 'vue'
 import AccountPlanBadge from '@/components/account/AccountPlanBadge.vue'
@@ -76,13 +76,13 @@ function continueToImport() {
 </script>
 
 <template>
-  <BaseModal
+  <ZDialog
     v-model="open"
     :title="view.modal.title"
     :description="view.modal.description"
-    :tone="view.modal.tone"
-    :size="view.modal.size"
-    :dismissible="!busy"
+    :type="view.modal.type"
+    :width="view.modal.width"
+    :show-close="!busy" :close-on-click-modal="!busy" :close-on-press-escape="!busy"
   >
     <template #icon>
       <Settings2 v-if="view.configuring" class="text-cp-text" :size="20" aria-hidden="true" />
@@ -111,15 +111,15 @@ function continueToImport() {
             :provider="account.provider"
             :authentication-kind="account.authenticationKind"
           />
-          <BaseIconButton
-            variant="secondary"
-            size="sm"
-            label="复制账号"
+          <ZIconButton
+            variant="solid"
+            size="small"
+            aria-label="复制账号"
             :disabled="busy || !accountCopyValue"
             @click="copyWithToast(accountCopyValue, { successText: '账号已复制' })"
           >
             <Copy class="size-3.5" />
-          </BaseIconButton>
+          </ZIconButton>
         </div>
       </div>
 
@@ -135,10 +135,10 @@ function continueToImport() {
         {{ scheduling.message }}
       </p>
       <template v-if="!view.configuring">
-        <BaseSegmented
+        <ZSegmented
           v-if="!reauthorizing && !view.isBatch"
           v-model="mode"
-          label="账号添加方式"
+          aria-label="账号添加方式"
           :options="view.modeOptions"
           :disabled="busy"
           class="w-full"
@@ -171,18 +171,18 @@ function continueToImport() {
     </div>
 
     <template #footer>
-      <BaseButton v-if="view.configuring || reauthorizing" variant="secondary" :disabled="busy" @click="open = false">
+      <ZButton v-if="view.configuring || reauthorizing" :disabled="busy" @click="open = false">
         取消
-      </BaseButton>
-      <BaseButton v-else class="mr-auto" variant="secondary" :disabled="busy" @click="form.step = 'settings'">
+      </ZButton>
+      <ZButton v-else class="mr-auto" :disabled="busy" @click="form.step = 'settings'">
         上一步
-      </BaseButton>
-      <BaseButton v-if="view.configuring" variant="primary" :disabled="!canSelect || !scheduling.valid || Boolean(modelError) || groupsLoading || Boolean(proxyError) || busy" @click="continueToImport">
+      </ZButton>
+      <ZButton v-if="view.configuring" type="primary" :disabled="!canSelect || !scheduling.valid || Boolean(modelError) || groupsLoading || Boolean(proxyError) || busy" @click="continueToImport">
         继续导入
-      </BaseButton>
-      <BaseButton v-else variant="primary" :loading="saving || oauthLoading" :disabled="!view.canSubmit" @click="emit('create')">
+      </ZButton>
+      <ZButton v-else type="primary" :loading="saving || oauthLoading" :disabled="!view.canSubmit" @click="emit('create')">
         {{ view.submitLabel }}
-      </BaseButton>
+      </ZButton>
     </template>
-  </BaseModal>
+  </ZDialog>
 </template>
diff --git a/frontend/src/views/accounts/components/account-create-modal/presenter.ts b/frontend/src/views/accounts/components/account-create-modal/presenter.ts
index 128b43d4d..d417cf075 100644
--- a/frontend/src/views/accounts/components/account-create-modal/presenter.ts
+++ b/frontend/src/views/accounts/components/account-create-modal/presenter.ts
@@ -49,8 +49,8 @@ export function resolveAccountCreatePresentation(input: {
     modal: {
       title: configuring ? '账号设置' : input.reauthorizing ? '重新授权账号' : '导入账号',
       description: configuring ? '设置将应用于本次导入的账号' : input.reauthorizing ? '完成授权后更新账号凭据' : description,
-      tone: configuring ? 'neutral' as const : 'info' as const,
-      size: configuring ? 'md-wide' as const : 'md' as const,
+      type: configuring ? 'default' as const : 'info' as const,
+      width: configuring ? '42rem' : '36rem',
     },
     oauth: {
       callbackLabel: id === 'xai' ? '回调地址或授权码' : '回调地址',
diff --git a/frontend/src/views/accounts/components/account-import-tasks/TaskDetail.vue b/frontend/src/views/accounts/components/account-import-tasks/TaskDetail.vue
index 8dc946f77..ee88ee250 100644
--- a/frontend/src/views/accounts/components/account-import-tasks/TaskDetail.vue
+++ b/frontend/src/views/accounts/components/account-import-tasks/TaskDetail.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { AccountImportTaskDetail } from '@/api'
-import { BaseButton, BaseEmpty, BaseScrollbar, BaseSegmented } from '@codex-proxy/ui'
+import { ZButton, ZEmpty, ZScrollbar, ZSegmented } from '@codex-proxy/ui'
 import { ArrowUpRight, Check, CircleAlert, Square, X } from '@lucide/vue'
 import { computed, shallowRef, watch } from 'vue'
 import ProviderIconGroup from '@/components/ProviderIconGroup.vue'
@@ -40,9 +40,9 @@ watch(hasAttention, (value) => {
           {{ task.createdAtDisplay }} 创建
         </p>
       </div>
-      <BaseButton
+      <ZButton
         v-if="!task.finishedAt"
-        size="sm"
+        size="small"
         :loading="stopping"
         :disabled="task.stopRequested || task.counts.pending === 0"
         @click="emit('stop')"
@@ -51,10 +51,10 @@ watch(hasAttention, (value) => {
           <Square class="size-3 text-cp-error" />
         </template>
         {{ task.stopRequested || task.counts.pending === 0 ? '等待当前条目结束' : '停止未开始条目' }}
-      </BaseButton>
-      <BaseButton v-else size="sm" variant="soft" @click="emit('viewAccounts')">
+      </ZButton>
+      <ZButton v-else size="small" type="primary" variant="plain" @click="emit('viewAccounts')">
         查看账号 <ArrowUpRight class="size-3.5" />
-      </BaseButton>
+      </ZButton>
     </div>
 
     <div>
@@ -86,17 +86,17 @@ watch(hasAttention, (value) => {
           <CircleAlert class="mt-0.5 size-3.5 shrink-0" />
           待核对条目可能已入库，请先查看账号，再决定是否重新导入
         </p>
-        <BaseSegmented
+        <ZSegmented
           v-model="filter"
           class="ml-auto shrink-0"
-          label="筛选导入明细"
+          aria-label="筛选导入明细"
           :options="filterOptions"
-          size="sm"
+          size="small"
         />
       </div>
       <div>
-        <BaseScrollbar :key="`${task.taskId}-${filter}`" max-height="min(18rem, 32dvh)">
-          <BaseEmpty v-if="!visibleItems.length" size="sm" title="暂无需要处理的条目" surface="none" />
+        <ZScrollbar :key="`${task.taskId}-${filter}`" max-height="min(18rem, 32dvh)">
+          <ZEmpty v-if="!visibleItems.length" size="small" title="暂无需要处理的条目" surface="none" />
           <ol v-else class="m-0 list-none space-y-1 p-0" aria-label="导入条目结果">
             <li
               v-for="item in visibleItems"
@@ -120,7 +120,7 @@ watch(hasAttention, (value) => {
               </span>
             </li>
           </ol>
-        </BaseScrollbar>
+        </ZScrollbar>
       </div>
     </div>
   </section>
diff --git a/frontend/src/views/accounts/components/account-import-tasks/index.vue b/frontend/src/views/accounts/components/account-import-tasks/index.vue
index 45aafb782..0d1cb402a 100644
--- a/frontend/src/views/accounts/components/account-import-tasks/index.vue
+++ b/frontend/src/views/accounts/components/account-import-tasks/index.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { AccountImportTask, AccountImportTaskDetail } from '@/api'
-import { BaseButton, BaseEmpty, BaseIconButton, BaseModal, BasePopover, BaseSelect } from '@codex-proxy/ui'
+import { ZButton, ZDialog, ZEmpty, ZIconButton, ZPopover, ZSelect } from '@codex-proxy/ui'
 import { CircleAlert, ListTodo } from '@lucide/vue'
 import { computed, shallowRef, useId, watch } from 'vue'
 import { taskLabel } from './presenter'
@@ -39,41 +39,41 @@ function handleRetentionKeydown(event: KeyboardEvent) {
 </script>
 
 <template>
-  <BaseModal v-model="open" title="导入任务" description="关闭页面后继续导入，再次打开即可查看进度" size="lg">
+  <ZDialog v-model="open" title="导入任务" description="关闭页面后继续导入，再次打开即可查看进度" width="48rem">
     <div v-if="error" role="alert" class="mb-4 flex items-center justify-between gap-3 rounded-cp bg-cp-warning-container p-3 text-xs text-cp-warning-on-container">
       <span>进度暂未更新：{{ error.replace(/[。.]\s*$/u, '') }}，恢复连接后将自动刷新</span>
-      <BaseButton size="sm" :loading="loading" @click="emit('refresh')">
+      <ZButton size="small" :loading="loading" @click="emit('refresh')">
         重试
-      </BaseButton>
+      </ZButton>
     </div>
-    <BaseEmpty v-if="!tasks.length" class="min-h-[min(20rem,50dvh)] content-center" :icon="ListTodo" :title="loading ? '正在读取导入任务' : '暂无导入任务'" description="新建一次账号导入，即可在这里查看逐条入库结果" />
+    <ZEmpty v-if="!tasks.length" class="min-h-[min(20rem,50dvh)] content-center" :icon="ListTodo" :title="loading ? '正在读取导入任务' : '暂无导入任务'" description="新建一次账号导入，即可在这里查看逐条入库结果" />
     <div v-else class="min-h-[min(20rem,50dvh)] min-w-0">
       <div v-if="tasks.length > 1" class="mb-5">
-        <BaseSelect
+        <ZSelect
           :model-value="selectedId"
           :options="taskOptions"
-          size="sm"
+          size="small"
           aria-label="切换导入任务"
           class="w-full min-w-0 sm:max-w-96"
-          @update:model-value="emit('select', $event)"
+          @update:model-value="emit('select', $event ?? selectedId)"
         />
       </div>
       <TaskDetail v-if="detail" :task="detail" :stopping="stopping" @stop="emit('stop')" @view-accounts="emit('viewAccounts')" />
-      <BaseEmpty v-else class="min-h-[min(16rem,40dvh)] content-center" :title="loading ? '正在读取条目结果' : '请选择一个任务'" surface="none" />
+      <ZEmpty v-else class="min-h-[min(16rem,40dvh)] content-center" :title="loading ? '正在读取条目结果' : '请选择一个任务'" surface="none" />
     </div>
     <template #footer>
       <div class="flex w-full flex-wrap items-center justify-between gap-3">
-        <BasePopover v-model="retentionOpen" trigger="hover-click" placement="top-start" :hover-delay="240">
-          <template #trigger>
-            <BaseIconButton
-              label="任务保留说明"
-              size="sm"
+        <ZPopover v-model="retentionOpen" trigger="hover-click" placement="top-start" :hover-delay="240">
+          <template #reference>
+            <ZIconButton
+              aria-label="任务保留说明"
+              size="small"
               :aria-expanded="retentionOpen"
               :aria-describedby="retentionOpen ? retentionId : undefined"
               @keydown="handleRetentionKeydown"
             >
               <CircleAlert class="size-4" />
-            </BaseIconButton>
+            </ZIconButton>
           </template>
           <div :id="retentionId" role="tooltip" class="grid w-72 max-w-[calc(100vw-2rem)] gap-2 p-4 text-cp-xs leading-relaxed text-cp-text-secondary">
             <p class="m-0">
@@ -83,11 +83,11 @@ function handleRetentionKeydown(event: KeyboardEvent) {
               服务重启后任务记录消失，已入库账号保留
             </p>
           </div>
-        </BasePopover>
-        <BaseButton @click="open = false">
+        </ZPopover>
+        <ZButton @click="open = false">
           关闭
-        </BaseButton>
+        </ZButton>
       </div>
     </template>
-  </BaseModal>
+  </ZDialog>
 </template>
diff --git a/frontend/src/views/accounts/components/account-profile-modal/Metrics.vue b/frontend/src/views/accounts/components/account-profile-modal/Metrics.vue
index 7250bee11..8c2d8f948 100644
--- a/frontend/src/views/accounts/components/account-profile-modal/Metrics.vue
+++ b/frontend/src/views/accounts/components/account-profile-modal/Metrics.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { AccountProfileStatisticsResponse } from '@/api'
-import { BaseSkeleton } from '@codex-proxy/ui'
+import { ZSkeleton } from '@codex-proxy/ui'
 import { computed } from 'vue'
 import { formatCompactNumber, formatInteger } from '@/utils/format'
 
@@ -67,7 +67,7 @@ function formatDuration(value: number | null | undefined) {
     <dl class="grid min-w-130 grid-cols-5">
       <div v-for="metric in metrics" :key="metric.label" class="min-w-0 px-2 text-center sm:px-3">
         <dd class="m-0 font-mono text-cp-lg leading-tight font-heavy tabular-nums text-cp-text" :title="metric.title">
-          <BaseSkeleton v-if="loading && !profile" shape="text" class="mx-auto h-4 w-14" />
+          <ZSkeleton v-if="loading && !profile" shape="text" class="mx-auto h-4 w-14" />
           <template v-else>
             {{ metric.value }}
           </template>
diff --git a/frontend/src/views/accounts/components/account-profile-modal/Skeleton.vue b/frontend/src/views/accounts/components/account-profile-modal/Skeleton.vue
index 334399b67..2791065a3 100644
--- a/frontend/src/views/accounts/components/account-profile-modal/Skeleton.vue
+++ b/frontend/src/views/accounts/components/account-profile-modal/Skeleton.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { BaseSkeleton } from '@codex-proxy/ui'
+import { ZSkeleton } from '@codex-proxy/ui'
 </script>
 
 <template>
@@ -8,20 +8,20 @@ import { BaseSkeleton } from '@codex-proxy/ui'
 
     <section class="grid min-w-0 gap-4 overflow-hidden">
       <div class="flex items-center justify-between">
-        <BaseSkeleton shape="text" class="h-4 w-20" />
-        <BaseSkeleton class="h-7 w-32 rounded-cp opacity-70" />
+        <ZSkeleton shape="text" class="h-4 w-20" />
+        <ZSkeleton class="h-7 w-32 rounded-cp opacity-70" />
       </div>
       <div class="grid min-w-190 gap-1" style="grid-template-columns: repeat(52, minmax(0, 1fr))">
         <div v-for="week in 52" :key="week" class="grid gap-1">
-          <BaseSkeleton v-for="day in 7" :key="day" class="aspect-square rounded-[3px] opacity-60" />
+          <ZSkeleton v-for="day in 7" :key="day" class="aspect-square rounded-[3px] opacity-60" />
         </div>
       </div>
     </section>
 
     <section class="grid gap-10 sm:grid-cols-2">
       <div v-for="column in 2" :key="column" class="grid gap-3">
-        <BaseSkeleton shape="text" class="h-4 w-28" />
-        <BaseSkeleton v-for="row in 5" :key="row" shape="text" class="w-full opacity-60" />
+        <ZSkeleton shape="text" class="h-4 w-28" />
+        <ZSkeleton v-for="row in 5" :key="row" shape="text" class="w-full opacity-60" />
       </div>
     </section>
   </div>
diff --git a/frontend/src/views/accounts/components/account-profile-modal/Subscription.vue b/frontend/src/views/accounts/components/account-profile-modal/Subscription.vue
index 2f8aa435a..94e2cccea 100644
--- a/frontend/src/views/accounts/components/account-profile-modal/Subscription.vue
+++ b/frontend/src/views/accounts/components/account-profile-modal/Subscription.vue
@@ -51,7 +51,7 @@ const dates = computed(() => [
         <dt class="text-cp-xs text-cp-text-secondary">
           计费
         </dt>
-        <dd class="m-0 mt-1.5 text-cp-sm leading-relaxed break-words text-cp-text">
+        <dd class="m-0 mt-1.5 text-cp-sm leading-relaxed wrap-break-word text-cp-text">
           {{ billing }}
         </dd>
       </div>
diff --git a/frontend/src/views/accounts/components/account-profile-modal/TokenActivity.vue b/frontend/src/views/accounts/components/account-profile-modal/TokenActivity.vue
index 91d3c8c84..fd2726ea5 100644
--- a/frontend/src/views/accounts/components/account-profile-modal/TokenActivity.vue
+++ b/frontend/src/views/accounts/components/account-profile-modal/TokenActivity.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { ProfileActivityLevel, ProfileActivityMode } from './activity'
 import type { ProfileActivityCalendar } from '@/api'
-import { BaseEmpty, BaseSegmented } from '@codex-proxy/ui'
+import { ZEmpty, ZSegmented } from '@codex-proxy/ui'
 
 import { computed, shallowRef } from 'vue'
 import { buildProfileActivityGrid, profileActivityCellLabel } from './activity'
@@ -40,14 +40,14 @@ const monthLabels = computed(() =>
           Token 活动
         </h3>
       </div>
-      <BaseSegmented v-model="mode" label="Token 活动统计方式" size="sm" :options="modeOptions" />
+      <ZSegmented v-model="mode" aria-label="Token 活动统计方式" size="small" :options="modeOptions" />
     </div>
 
-    <BaseEmpty
+    <ZEmpty
       v-if="calendar === null"
       title="暂无 Token 活动"
       description="本次未获取到每日 Token 活动"
-      size="sm"
+      size="small"
       surface="none"
     />
 
diff --git a/frontend/src/views/accounts/components/account-profile-modal/index.vue b/frontend/src/views/accounts/components/account-profile-modal/index.vue
index 1c637dec9..5cacecb0d 100644
--- a/frontend/src/views/accounts/components/account-profile-modal/index.vue
+++ b/frontend/src/views/accounts/components/account-profile-modal/index.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { Account } from '@/api'
 
-import { BaseButton, BaseEmpty, BaseModal, BaseSkeleton } from '@codex-proxy/ui'
+import { ZButton, ZDialog, ZEmpty, ZSkeleton } from '@codex-proxy/ui'
 
 import { RefreshCw, TriangleAlert } from '@lucide/vue'
 import { toRef } from 'vue'
@@ -24,7 +24,7 @@ const { profile, subscription, loading, error, load } = useAccountPersonalInfo({
 </script>
 
 <template>
-  <BaseModal v-model="open" title="个人信息" size="xl">
+  <ZDialog v-model="open" title="个人信息" width="64rem">
     <div class="flex min-h-0 min-w-0 flex-col gap-6 pb-2">
       <div class="grid min-w-0 grid-cols-1 gap-4 rounded-cp-lg bg-cp-fill-alter p-4 sm:p-5 lg:items-center" :class="account.capabilities.profile ? 'lg:grid-cols-[minmax(310px,1.05fr)_minmax(0,1.95fr)]' : undefined">
         <AccountProfileHero :account="account" :profile="profile" />
@@ -42,10 +42,10 @@ const { profile, subscription, loading, error, load } = useAccountPersonalInfo({
         <AccountProfileSkeleton v-if="account.capabilities.profile" />
         <div v-else role="status" aria-busy="true">
           <span class="sr-only">正在加载订阅信息</span>
-          <BaseSkeleton class="h-24 w-full rounded-cp-lg" />
+          <ZSkeleton class="h-24 w-full rounded-cp-lg" />
         </div>
       </template>
-      <BaseEmpty
+      <ZEmpty
         v-else-if="error && !profile"
         title="个人信息加载失败"
         :description="error"
@@ -53,7 +53,7 @@ const { profile, subscription, loading, error, load } = useAccountPersonalInfo({
         surface="none"
       />
       <template v-else-if="profile">
-        <BaseEmpty
+        <ZEmpty
           v-if="profile.hasStatsError"
           title="个人统计暂不可用"
           description="本次未获取到统计数据，可以点击刷新信息重试"
@@ -68,22 +68,22 @@ const { profile, subscription, loading, error, load } = useAccountPersonalInfo({
           本次信息刷新未完成，保留已获取的结果
         </p>
       </template>
-      <BaseEmpty
+      <ZEmpty
         v-else-if="!loading && !account.capabilities.profile && !subscription"
         title="暂无订阅信息"
         surface="none"
       />
     </div>
     <template #footer>
-      <BaseButton variant="secondary" @click="open = false">
+      <ZButton @click="open = false">
         关闭
-      </BaseButton>
-      <BaseButton :aria-busy="loading" :aria-disabled="loading" @click="load">
+      </ZButton>
+      <ZButton :aria-busy="loading" :aria-disabled="loading" @click="load">
         <template #icon>
           <RefreshCw class="size-4" :class="loading ? 'animate-spin motion-reduce:animate-none' : undefined" />
         </template>
         刷新信息
-      </BaseButton>
+      </ZButton>
     </template>
-  </BaseModal>
+  </ZDialog>
 </template>
diff --git a/frontend/src/views/accounts/components/account-quota-forecast-modal/Skeleton.vue b/frontend/src/views/accounts/components/account-quota-forecast-modal/Skeleton.vue
index c3e7d1a02..672399d1e 100644
--- a/frontend/src/views/accounts/components/account-quota-forecast-modal/Skeleton.vue
+++ b/frontend/src/views/accounts/components/account-quota-forecast-modal/Skeleton.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { BaseSkeleton } from '@codex-proxy/ui'
+import { ZSkeleton } from '@codex-proxy/ui'
 </script>
 
 <template>
@@ -9,27 +9,27 @@ import { BaseSkeleton } from '@codex-proxy/ui'
       <div class="flex flex-col gap-5 rounded-cp-card bg-cp-fill-tertiary/70 p-4 [html[data-theme=light]_&]:bg-cp-fill-quaternary/70">
         <div>
           <div class="flex items-center justify-between gap-3">
-            <BaseSkeleton shape="text" class="w-16" />
-            <BaseSkeleton class="h-6 w-28" />
+            <ZSkeleton shape="text" class="w-16" />
+            <ZSkeleton class="h-6 w-28" />
           </div>
-          <BaseSkeleton class="mt-2 h-8 w-28" />
-          <BaseSkeleton class="mt-3 h-3 w-full rounded-full" />
+          <ZSkeleton class="mt-2 h-8 w-28" />
+          <ZSkeleton class="mt-3 h-3 w-full rounded-full" />
           <div class="mt-2 flex justify-between">
-            <BaseSkeleton v-for="tick in 5" :key="tick" shape="text" class="h-2.5 w-5" />
+            <ZSkeleton v-for="tick in 5" :key="tick" shape="text" class="h-2.5 w-5" />
           </div>
         </div>
 
         <div class="grid gap-2">
           <div class="mb-1 flex justify-between gap-3">
-            <BaseSkeleton shape="text" class="w-20" />
-            <BaseSkeleton shape="text" class="w-20" />
+            <ZSkeleton shape="text" class="w-20" />
+            <ZSkeleton shape="text" class="w-20" />
           </div>
           <div v-for="metric in 2" :key="metric" class="rounded-cp bg-cp-bg-container px-3 py-3">
-            <BaseSkeleton shape="text" class="w-20" />
+            <ZSkeleton shape="text" class="w-20" />
             <div class="mt-3 grid grid-cols-[1fr_20px_1.2fr] items-center gap-2">
-              <BaseSkeleton shape="text" class="w-14" />
-              <BaseSkeleton class="size-3" />
-              <BaseSkeleton class="h-6 w-24 justify-self-end" />
+              <ZSkeleton shape="text" class="w-14" />
+              <ZSkeleton class="size-3" />
+              <ZSkeleton class="h-6 w-24 justify-self-end" />
             </div>
           </div>
         </div>
diff --git a/frontend/src/views/accounts/components/account-quota-forecast-modal/index.vue b/frontend/src/views/accounts/components/account-quota-forecast-modal/index.vue
index 8b24023e9..33addd0a0 100644
--- a/frontend/src/views/accounts/components/account-quota-forecast-modal/index.vue
+++ b/frontend/src/views/accounts/components/account-quota-forecast-modal/index.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { Account } from '@/api'
 
-import { BaseButton, BaseEmpty, BaseIconButton, BaseModal, BasePopover, BaseSegmented } from '@codex-proxy/ui'
+import { ZButton, ZDialog, ZEmpty, ZIconButton, ZPopover, ZSegmented } from '@codex-proxy/ui'
 import { ChartNoAxesCombined, CircleAlert, RefreshCw } from '@lucide/vue'
 import { useIntervalFn, useNow } from '@vueuse/core'
 import { computed, ref, toRef, useId, watch } from 'vue'
@@ -62,12 +62,12 @@ function handleExplanationKeydown(event: KeyboardEvent) {
 </script>
 
 <template>
-  <BaseModal
+  <ZDialog
     v-model="open"
     title="额度预测"
     description="按本周期估算，重置后重新累计"
-    size="md"
-    tone="info"
+    width="36rem"
+    type="info"
   >
     <template #icon>
       <ChartNoAxesCombined class="size-5 text-cp-primary-text" :stroke-width="1.75" />
@@ -80,23 +80,23 @@ function handleExplanationKeydown(event: KeyboardEvent) {
             <ProviderIconGroup :provider="account.provider" size="xs" />
           </template>
         </AccountIdentityCell>
-        <BaseSegmented v-model="period" label="预测周期" :options="options" class="w-48" />
+        <ZSegmented v-model="period" aria-label="预测周期" :options="options" class="w-48" />
       </div>
 
       <div aria-live="polite" :aria-busy="loading || refreshing">
         <ForecastSkeleton v-if="loading || refreshing" />
         <div v-else-if="error && !report" class="grid rounded-cp-card bg-cp-fill-tertiary/70 [html[data-theme=light]_&]:bg-cp-fill-quaternary/70">
-          <BaseEmpty title="预测加载失败" description="暂时无法取得预测数据，请重新加载" surface="none" class="min-h-80 content-center">
+          <ZEmpty title="预测加载失败" description="暂时无法取得预测数据，请重新加载" surface="none" class="min-h-80 content-center">
             <template #action>
-              <BaseButton variant="secondary" @click="load">
+              <ZButton @click="load">
                 重新加载
-              </BaseButton>
+              </ZButton>
             </template>
-          </BaseEmpty>
+          </ZEmpty>
         </div>
         <template v-else-if="forecast">
           <div v-if="unavailableReason" class="grid rounded-cp-card bg-cp-fill-tertiary/70 [html[data-theme=light]_&]:bg-cp-fill-quaternary/70">
-            <BaseEmpty title="暂时无法预测" :description="unavailableReason" :icon="ChartNoAxesCombined" surface="none" class="min-h-72 content-center" />
+            <ZEmpty title="暂时无法预测" :description="unavailableReason" :icon="ChartNoAxesCombined" surface="none" class="min-h-72 content-center" />
           </div>
           <ForecastCapacity v-else :forecast="forecast" />
         </template>
@@ -108,18 +108,17 @@ function handleExplanationKeydown(event: KeyboardEvent) {
         <span v-if="forecast?.source?.observedAt" class="hidden text-cp-xs text-cp-text-tertiary sm:block">
           更新于 {{ forecast.source.observedAtDisplay }}
         </span>
-        <BasePopover v-model="explanationOpen" trigger="hover-click" placement="top-start" :hover-delay="240">
-          <template #trigger>
-            <BaseIconButton
-              label="预测说明"
-              variant="ghost"
-              size="sm"
+        <ZPopover v-model="explanationOpen" trigger="hover-click" placement="top-start" :hover-delay="240">
+          <template #reference>
+            <ZIconButton
+              aria-label="预测说明"
+              size="small"
               :aria-expanded="explanationOpen"
               :aria-describedby="explanationOpen ? explanationId : undefined"
               @keydown="handleExplanationKeydown"
             >
               <CircleAlert class="size-3.5" aria-hidden="true" />
-            </BaseIconButton>
+            </ZIconButton>
           </template>
           <section :id="explanationId" role="tooltip" class="grid w-96 max-w-[calc(100vw-2rem)] gap-3 p-4 text-cp-xs leading-relaxed text-cp-text-secondary">
             <h4 class="m-0 font-heavy text-cp-text">
@@ -141,12 +140,12 @@ function handleExplanationKeydown(event: KeyboardEvent) {
               预测以数据更新时间为准，等价费用不是实际账单或账户余额
             </p>
           </section>
-        </BasePopover>
+        </ZPopover>
       </div>
-      <BaseButton variant="secondary" @click="open = false">
+      <ZButton @click="open = false">
         关闭
-      </BaseButton>
-      <BaseButton variant="primary" :loading="refreshing" :disabled="loading" @click="refresh">
+      </ZButton>
+      <ZButton type="primary" :loading="refreshing" :disabled="loading" @click="refresh">
         <template #loading>
           <RefreshCw class="size-3.5 motion-safe:animate-spin" />
         </template>
@@ -154,7 +153,7 @@ function handleExplanationKeydown(event: KeyboardEvent) {
           <RefreshCw class="size-3.5" />
         </template>
         刷新额度
-      </BaseButton>
+      </ZButton>
     </template>
-  </BaseModal>
+  </ZDialog>
 </template>
diff --git a/frontend/src/views/accounts/components/account-quota-panel/ResetCredits.vue b/frontend/src/views/accounts/components/account-quota-panel/ResetCredits.vue
index 2ba63eec3..8afb7290e 100644
--- a/frontend/src/views/accounts/components/account-quota-panel/ResetCredits.vue
+++ b/frontend/src/views/accounts/components/account-quota-panel/ResetCredits.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { Account, AccountResetCredit } from '@/api'
-import { BaseButton, BaseEmpty, BaseIconButton, BaseModal } from '@codex-proxy/ui'
+import { ZButton, ZDialog, ZEmpty, ZIconButton } from '@codex-proxy/ui'
 
 import { AlertTriangle, RefreshCw, TicketCheck } from '@lucide/vue'
 import { computed, shallowRef, watch } from 'vue'
@@ -121,12 +121,12 @@ function handleRequestConsume(creditId: string) {
     </span>
   </button>
 
-  <BaseModal
+  <ZDialog
     v-model="panelOpen"
     :title="modalTitle"
-    :tone="confirmation ? 'warning' : 'neutral'"
-    :size="confirmation ? 'sm' : 'md'"
-    :dismissible="!consuming"
+    :type="confirmation ? 'warning' : 'default'"
+    :width="confirmation ? '28rem' : '36rem'"
+    :show-close="!consuming" :close-on-click-modal="!consuming" :close-on-press-escape="!consuming"
   >
     <div v-if="confirmation" class="grid gap-3">
       <section class="rounded-cp bg-cp-fill-quaternary px-4 py-3.5">
@@ -158,9 +158,9 @@ function handleRequestConsume(creditId: string) {
             请继续确认上次重置结果
           </p>
         </div>
-        <BaseButton size="sm" variant="soft" :disabled="loading || consuming || !canRequestConsume" @click="requestConsume">
+        <ZButton size="small" type="primary" variant="plain" :disabled="loading || consuming || !canRequestConsume" @click="requestConsume">
           继续确认
-        </BaseButton>
+        </ZButton>
       </section>
 
       <section class="overflow-hidden rounded-cp bg-cp-fill-quaternary" aria-label="使用限额重置">
@@ -178,10 +178,9 @@ function handleRequestConsume(creditId: string) {
           >
             {{ countLabel }}
           </span>
-          <BaseIconButton
-            variant="ghost"
-            size="sm"
-            label="刷新主动重置卡"
+          <ZIconButton
+            size="small"
+            aria-label="刷新主动重置卡"
             :loading="loading"
             :disabled="loading || consuming"
             @click="loadCredits"
@@ -190,7 +189,7 @@ function handleRequestConsume(creditId: string) {
               <RefreshCw class="size-3.5 animate-spin motion-reduce:animate-none" />
             </template>
             <RefreshCw class="size-3.5" />
-          </BaseIconButton>
+          </ZIconButton>
         </div>
 
         <div :aria-busy="loading || consuming">
@@ -222,22 +221,22 @@ function handleRequestConsume(creditId: string) {
                   {{ credit.expiry }}
                 </p>
               </div>
-              <BaseButton
-                size="sm"
-                variant="primary"
+              <ZButton
+                size="small"
+                type="primary"
                 :disabled="!account.capabilities.consumeResetCredit || loading || consuming || ambiguous || availableCount <= 0"
                 :aria-label="`使用重置：${credit.title}，${credit.expiry}`"
                 @click="handleRequestConsume(credit.id)"
               >
                 使用重置
-              </BaseButton>
+              </ZButton>
             </li>
           </ul>
 
-          <BaseEmpty
+          <ZEmpty
             v-else-if="!showCountOnlyAction"
             :icon="TicketCheck"
-            size="sm"
+            size="small"
             surface="none"
             title="当前没有可用重置次数"
             description="可刷新列表，重新读取上游状态"
@@ -250,22 +249,22 @@ function handleRequestConsume(creditId: string) {
 
     <template v-if="confirmation || showCountOnlyAction" #footer>
       <template v-if="confirmation">
-        <BaseButton variant="secondary" :disabled="consuming" @click="cancelConsume">
+        <ZButton :disabled="consuming" @click="cancelConsume">
           返回
-        </BaseButton>
-        <BaseButton variant="primary" :loading="consuming" :disabled="loading || !canRequestConsume" @click="confirmConsume">
+        </ZButton>
+        <ZButton type="primary" :loading="consuming" :disabled="loading || !canRequestConsume" @click="confirmConsume">
           {{ confirmation.ambiguous ? '再次确认' : '确认重置' }}
-        </BaseButton>
+        </ZButton>
       </template>
-      <BaseButton
+      <ZButton
         v-else
-        size="sm"
-        variant="primary"
+        size="small"
+        type="primary"
         :disabled="loading || consuming || ambiguous || !canRequestConsume"
         @click="requestConsume"
       >
         使用一次重置（由上游选择）
-      </BaseButton>
+      </ZButton>
     </template>
-  </BaseModal>
+  </ZDialog>
 </template>
diff --git a/frontend/src/views/accounts/components/account-quota-panel/index.vue b/frontend/src/views/accounts/components/account-quota-panel/index.vue
index e9239f208..fb218b866 100644
--- a/frontend/src/views/accounts/components/account-quota-panel/index.vue
+++ b/frontend/src/views/accounts/components/account-quota-panel/index.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { Account } from '@/api'
 
-import { BaseEmpty, BaseIconButton } from '@codex-proxy/ui'
+import { ZEmpty, ZIconButton } from '@codex-proxy/ui'
 
 import { ChartNoAxesCombined, RefreshCw, UserRound } from '@lucide/vue'
 import { computed, shallowRef, watch } from 'vue'
@@ -59,37 +59,34 @@ watch(hasPersonalInfo, (available) => {
         </p>
       </div>
       <div v-if="hasActions" class="flex shrink-0 items-center gap-0.5 [&_svg]:size-3.5 [&_svg]:stroke-2">
-        <BaseIconButton
+        <ZIconButton
           v-if="hasPersonalInfo"
-          label="查看个人信息"
-          size="sm"
-          variant="ghost"
+          aria-label="查看个人信息"
+          size="small"
           :pressed="profileOpen"
           @click="profileOpen = true"
         >
           <UserRound class="size-3.5" />
-        </BaseIconButton>
+        </ZIconButton>
         <AccountResetCredits
           v-if="account.capabilities.resetCredits"
           :account="account"
           @consumed="emit('quotaReset', $event)"
         />
-        <BaseIconButton
+        <ZIconButton
           v-if="hasForecast"
-          label="预测周/月额度"
-          size="sm"
-          variant="ghost"
+          aria-label="预测周/月额度"
+          size="small"
           aria-haspopup="dialog"
           :pressed="forecastOpen"
           @click="forecastOpen = true"
         >
           <ChartNoAxesCombined class="size-3.5" />
-        </BaseIconButton>
-        <BaseIconButton
+        </ZIconButton>
+        <ZIconButton
           v-if="account.capabilities.quotaRefresh"
-          variant="ghost"
-          size="sm"
-          label="刷新额度"
+          size="small"
+          aria-label="刷新额度"
           :loading="refreshing"
           :disabled="refreshing"
           @click="emit('refreshQuota', account.id)"
@@ -98,12 +95,12 @@ watch(hasPersonalInfo, (available) => {
             <RefreshCw class="size-3.5 animate-spin motion-reduce:animate-none" />
           </template>
           <RefreshCw class="size-3.5" />
-        </BaseIconButton>
+        </ZIconButton>
       </div>
     </div>
 
     <div v-if="!account.capabilities.quota && quotaEntries.length === 0" class="grid flex-1 place-items-center">
-      <BaseEmpty title="暂不支持查询上游额度" surface="none" />
+      <ZEmpty title="暂不支持查询上游额度" surface="none" />
     </div>
     <div v-else class="grid min-h-0 gap-3">
       <AccountQuotaPanelEntry
diff --git a/frontend/src/views/accounts/components/account-quota-summary-cell/Entry.vue b/frontend/src/views/accounts/components/account-quota-summary-cell/Entry.vue
index 80a4ad229..c39d163dc 100644
--- a/frontend/src/views/accounts/components/account-quota-summary-cell/Entry.vue
+++ b/frontend/src/views/accounts/components/account-quota-summary-cell/Entry.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { AccountQuotaWindow } from '@/api'
 
-import { BasePopover } from '@codex-proxy/ui'
+import { ZPopover } from '@codex-proxy/ui'
 
 import { computed } from 'vue'
 import AccountRequestTimeline from '@/components/account/account-usage-window/AccountRequestTimeline.vue'
@@ -74,8 +74,8 @@ function quotaWindowCode(windowSeconds: number | null, role: AccountQuotaWindow[
 </script>
 
 <template>
-  <BasePopover class="grid! w-full grid-cols-subgrid" trigger="hover-click" placement="right" :hover-delay="240">
-    <template #trigger="{ open }">
+  <ZPopover class="grid! w-full grid-cols-subgrid" trigger="hover-click" placement="right" :hover-delay="240">
+    <template #reference="{ open }">
       <button
         type="button"
         class="col-span-full grid w-full min-w-0 grid-cols-subgrid cursor-pointer rounded-sm border-0 bg-transparent p-0 text-left outline-none focus-visible:ring-2 focus-visible:ring-cp-control-outline"
@@ -184,5 +184,5 @@ function quotaWindowCode(windowSeconds: number | null, role: AccountQuotaWindow[
         </article>
       </div>
     </section>
-  </BasePopover>
+  </ZPopover>
 </template>
diff --git a/frontend/src/views/accounts/components/account-status-badge/index.vue b/frontend/src/views/accounts/components/account-status-badge/index.vue
index e0e074b1b..2a9197ef7 100644
--- a/frontend/src/views/accounts/components/account-status-badge/index.vue
+++ b/frontend/src/views/accounts/components/account-status-badge/index.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { AccountErrorReason, AccountStatus } from '@/api'
-import { BasePopover, BaseScrollbar } from '@codex-proxy/ui'
+import { ZPopover, ZScrollbar } from '@codex-proxy/ui'
 
 import { computed } from 'vue'
 import { resolveAccountStatusPresentation } from './presenter'
@@ -47,8 +47,8 @@ const presentation = computed(() =>
 </script>
 
 <template>
-  <BasePopover :disabled="!presentation.hasDetail" trigger="hover-click" placement="top-start">
-    <template #trigger="{ open }">
+  <ZPopover :disabled="!presentation.hasDetail" trigger="hover-click" placement="top-start">
+    <template #reference="{ open }">
       <component
         :is="presentation.hasDetail ? 'button' : 'span'"
         :type="presentation.hasDetail ? 'button' : undefined"
@@ -140,15 +140,15 @@ const presentation = computed(() =>
             <span class="text-cp-xs leading-none font-heavy text-cp-text-tertiary">上游原始反馈</span>
             <span class="shrink-0 text-[10px] leading-none font-emphasis text-cp-text-quaternary">仅供排查</span>
           </div>
-          <BaseScrollbar class="bg-cp-fill-quaternary" max-height="124px">
+          <ZScrollbar class="bg-cp-fill-quaternary" max-height="124px">
             <div class="px-3 py-2">
               <pre
                 class="m-0 whitespace-pre-wrap wrap-break-word font-mono text-cp-xs leading-[1.55] font-emphasis text-cp-text-secondary"
               >{{ presentation.errorText }}</pre>
             </div>
-          </BaseScrollbar>
+          </ZScrollbar>
         </div>
       </div>
     </section>
-  </BasePopover>
+  </ZPopover>
 </template>
diff --git a/frontend/src/views/accounts/composables/useAccountBatchEditor.ts b/frontend/src/views/accounts/composables/useAccountBatchEditor.ts
index 54bf8c793..ee86ac861 100644
--- a/frontend/src/views/accounts/composables/useAccountBatchEditor.ts
+++ b/frontend/src/views/accounts/composables/useAccountBatchEditor.ts
@@ -1,7 +1,7 @@
 import type { Ref } from 'vue'
 import type { Account, AccountModelAccess } from '@/api'
 
-import { toast } from '@codex-proxy/ui'
+import { ZNotification } from '@codex-proxy/ui'
 import { computed, ref, shallowRef, watch } from 'vue'
 import { batchUpdateAccounts } from '@/api'
 import { useAsyncAction } from '@/composables/useAsyncAction'
@@ -64,20 +64,20 @@ export function useAccountBatchEditor(options: {
       return
     const modelError = accountModelAccessError(modelAccess.value)
     if (modelError) {
-      toast.warning(modelError)
+      ZNotification.warning({ message: modelError })
       return
     }
     if (!hasChanges.value) {
-      toast.warning('请选择需要更新的设置')
+      ZNotification.warning({ message: '请选择需要更新的设置' })
       return
     }
     const scheduling = parseAccountSchedulingForm(editedFields.value.has('concurrencyLimit') ? concurrencyLimit.value : '', editedFields.value.has('weight') ? weight.value : '1')
     if (proxyMode.value === 'proxy' && !proxyId.value.trim()) {
-      toast.warning('请选择已通过测试的代理')
+      ZNotification.warning({ message: '请选择已通过测试的代理' })
       return
     }
     if (!scheduling.valid) {
-      toast.warning(scheduling.message)
+      ZNotification.warning({ message: scheduling.message })
       return
     }
 
@@ -94,7 +94,7 @@ export function useAccountBatchEditor(options: {
       })
       showBatchEditModal.value = false
       options.selectedIds.value = new Set()
-      toast.success(`已更新 ${accountIds.length} 个账号`)
+      ZNotification.success({ message: `已更新 ${accountIds.length} 个账号` })
       void Promise.allSettled([options.reloadAccounts(), options.reloadGroups()])
     }, { onError: () => void options.reloadAccounts() })
   }
diff --git a/frontend/src/views/accounts/composables/useAccountConnectionTest.ts b/frontend/src/views/accounts/composables/useAccountConnectionTest.ts
index fa12226bf..a192b59e7 100644
--- a/frontend/src/views/accounts/composables/useAccountConnectionTest.ts
+++ b/frontend/src/views/accounts/composables/useAccountConnectionTest.ts
@@ -1,5 +1,5 @@
 import type { Account, AccountModelsResponse } from '@/api'
-import { toast } from '@codex-proxy/ui'
+import { ZNotification } from '@codex-proxy/ui'
 
 import { CheckCircle2, Clock3, Wifi, XCircle } from '@lucide/vue'
 import { useEventSource } from '@vueuse/core'
@@ -424,7 +424,7 @@ export function useAccountConnectionTest(options: { reload: () => Promise<unknow
         return
       applyConnectionTestModels(result, refresh)
       if (refresh) {
-        toast.success(`已刷新 ${connectionTestModelOptions.value.length} 个上游模型`)
+        ZNotification.success({ message: `已刷新 ${connectionTestModelOptions.value.length} 个上游模型` })
       }
       else if (!connectionTestSelectedModel.value) {
         connectionTestError.value = '没有可测试模型'
diff --git a/frontend/src/views/accounts/composables/useAccountEditor.ts b/frontend/src/views/accounts/composables/useAccountEditor.ts
index dcd595bc1..99ea94a1a 100644
--- a/frontend/src/views/accounts/composables/useAccountEditor.ts
+++ b/frontend/src/views/accounts/composables/useAccountEditor.ts
@@ -1,6 +1,6 @@
 import type { Account, AccountModelAccess, ApiKeyConfiguration } from '@/api'
 
-import { toast } from '@codex-proxy/ui'
+import { ZNotification } from '@codex-proxy/ui'
 import { ref, shallowRef, watch } from 'vue'
 import { getAccountDetail, updateAccount } from '@/api'
 import { useAsyncAction } from '@/composables/useAsyncAction'
@@ -96,22 +96,22 @@ export function useAccountEditor(options: {
     if (isApiKey) {
       const error = apiKeyAccountError(apiKey.value, true)
       if (error) {
-        toast.warning(error)
+        ZNotification.warning({ message: error })
         return
       }
     }
     const modelError = accountModelAccessError(modelAccess.value)
     if (modelError) {
-      toast.warning(modelError)
+      ZNotification.warning({ message: modelError })
       return
     }
     const scheduling = parseAccountSchedulingForm(concurrencyLimit.value, weight.value)
     if (proxyMode.value === 'proxy' && !proxyId.value.trim()) {
-      toast.warning('请选择已通过测试的代理')
+      ZNotification.warning({ message: '请选择已通过测试的代理' })
       return
     }
     if (!scheduling.valid) {
-      toast.warning(scheduling.message)
+      ZNotification.warning({ message: scheduling.message })
       return
     }
 
@@ -140,7 +140,7 @@ export function useAccountEditor(options: {
             : undefined,
       })
       showEditModal.value = false
-      toast.success('账号已更新')
+      ZNotification.success({ message: '账号已更新' })
       void Promise.allSettled([options.reloadAccounts(), options.reloadGroups()])
     })
   }
diff --git a/frontend/src/views/accounts/composables/useAccountMutations.ts b/frontend/src/views/accounts/composables/useAccountMutations.ts
index 3b231f081..e838f7db1 100644
--- a/frontend/src/views/accounts/composables/useAccountMutations.ts
+++ b/frontend/src/views/accounts/composables/useAccountMutations.ts
@@ -1,7 +1,7 @@
 import type { Ref } from 'vue'
 import type { Account, AccountImportTask } from '@/api'
 import type { RequestOptions } from '@/api/request'
-import { toast } from '@codex-proxy/ui'
+import { ZNotification } from '@codex-proxy/ui'
 import { computed, ref, shallowReactive, watch } from 'vue'
 import {
   batchUpdateAccounts,
@@ -104,7 +104,7 @@ export function useAccountMutations(options: {
         options.selectedIds.value = remaining
         showSingleDeleteModal.value = false
         await loadAccounts()
-        toast.success('账号已删除')
+        ZNotification.success({ message: '账号已删除' })
       },
     )
   }
@@ -128,17 +128,15 @@ export function useAccountMutations(options: {
         }
         showDeleteModal.value = false
         await loadAccounts()
-        toast.success(`已删除 ${deletedCount} 个账号`)
+        ZNotification.success({ message: `已删除 ${deletedCount} 个账号` })
       },
       {
         errorText: false,
         onError: (error) => {
           void loadAccounts().catch(() => undefined)
-          toast.error(
-            deletedCount > 0
-              ? `已删除 ${deletedCount} 个账号，其余未删除：${errorMessage(error, '操作失败')}`
-              : errorMessage(error, '批量删除失败'),
-          )
+          ZNotification.error({ message: deletedCount > 0
+            ? `已删除 ${deletedCount} 个账号，其余未删除：${errorMessage(error, '操作失败')}`
+            : errorMessage(error, '批量删除失败') })
         },
       },
     )
@@ -149,11 +147,11 @@ export function useAccountMutations(options: {
       return
     const selected = [...options.selectedIds.value]
     if (selected.length === 0) {
-      toast.warning('请选择要导出的账号')
+      ZNotification.warning({ message: '请选择要导出的账号' })
       return
     }
     if (exportDisabledReason.value) {
-      toast.warning(exportDisabledReason.value)
+      ZNotification.warning({ message: exportDisabledReason.value })
       return
     }
 
@@ -165,7 +163,7 @@ export function useAccountMutations(options: {
         })
         const fileName = payload.fileName
         await downloadJson(payload, fileName)
-        toast.success(`已导出 ${selected.length} 个账号`)
+        ZNotification.success({ message: `已导出 ${selected.length} 个账号` })
       },
       { errorText: '导出失败' },
     )
@@ -178,7 +176,7 @@ export function useAccountMutations(options: {
         const plan = account.planTypeDisplay.trim().replace(/[^\p{L}\p{N}_-]/gu, '_') || 'unknown-plan'
         const name = account.name.trim().replace(/[^\p{L}\p{N}_-]/gu, '_') || 'account'
         await downloadJson(result.catalog, `cpr-model-catalog-${plan}-${name}.json`)
-        toast.success(`已下载模型目录，共 ${result.modelCount} 个模型`)
+        ZNotification.success({ message: `已下载模型目录，共 ${result.modelCount} 个模型` })
       }
       catch {}
     })
@@ -194,14 +192,14 @@ export function useAccountMutations(options: {
         )
         await loadAccounts()
         if (result.result === 'skipped') {
-          toast.warning(result.error || 'Token 正在刷新中')
+          ZNotification.warning({ message: result.error || 'Token 正在刷新中' })
           return
         }
         if (result.result === 'failed') {
-          toast.error(result.error || '刷新失败')
+          ZNotification.error({ message: result.error || '刷新失败' })
           return
         }
-        toast.success('Token 已刷新')
+        ZNotification.success({ message: 'Token 已刷新' })
       }
       catch {}
     })
@@ -212,7 +210,7 @@ export function useAccountMutations(options: {
       try {
         await batchUpdateAccounts({ accountIds: [account.id], enabled: !account.enabled })
         await loadAccounts()
-        toast.success(account.enabled ? '调度已停用' : '调度已启用')
+        ZNotification.success({ message: account.enabled ? '调度已停用' : '调度已启用' })
       }
       catch {}
     })
@@ -228,7 +226,7 @@ export function useAccountMutations(options: {
           selectedIds.delete(accountId)
           options.selectedIds.value = selectedIds
         }
-        toast.success('额度已刷新')
+        ZNotification.success({ message: '额度已刷新' })
       }
       catch {}
     })
@@ -242,10 +240,7 @@ export function useAccountMutations(options: {
       await options.replaceAccount(result.account)
     }
     catch (error: unknown) {
-      toast.warning(
-        `额度已重置，但最新额度加载失败：${errorMessage(error, '请手动刷新额度')}`,
-        { duration: 5000 },
-      )
+      ZNotification.warning({ message: `额度已重置，但最新额度加载失败：${errorMessage(error, '请手动刷新额度')}`, ...({ duration: 5000 }) })
     }
   }
 
@@ -259,7 +254,7 @@ export function useAccountMutations(options: {
           selectedIds.delete(accountId)
           options.selectedIds.value = selectedIds
         }
-        toast.success('账号状态已恢复')
+        ZNotification.success({ message: '账号状态已恢复' })
       }
       catch {}
     })
diff --git a/frontend/src/views/accounts/composables/useAccountOnboarding.ts b/frontend/src/views/accounts/composables/useAccountOnboarding.ts
index 427c61e37..4593b85ec 100644
--- a/frontend/src/views/accounts/composables/useAccountOnboarding.ts
+++ b/frontend/src/views/accounts/composables/useAccountOnboarding.ts
@@ -1,5 +1,5 @@
 import type { Account, AccountImportTask } from '@/api'
-import { toast } from '@codex-proxy/ui'
+import { ZNotification } from '@codex-proxy/ui'
 import { computed, ref, shallowRef, watch } from 'vue'
 import { createAccountImportTask, importAccounts } from '@/api'
 import { useAsyncAction } from '@/composables/useAsyncAction'
@@ -92,7 +92,7 @@ export function useAccountOnboarding(options: {
       })
       showCreateModal.value = false
       options.onImportTaskCreated(task)
-      toast.success('导入任务已创建')
+      ZNotification.success({ message: '导入任务已创建' })
     })
   }
 
@@ -119,7 +119,7 @@ export function useAccountOnboarding(options: {
       })
     }
     catch (cause) {
-      toast.error(errorMessage(cause, '启动授权失败'))
+      ZNotification.error({ message: errorMessage(cause, '启动授权失败') })
     }
   }
 
@@ -142,7 +142,7 @@ export function useAccountOnboarding(options: {
 
   async function finishCreate(message: string) {
     showCreateModal.value = false
-    toast.success(message)
+    ZNotification.success({ message })
     await options.reload()
   }
 
diff --git a/frontend/src/views/accounts/composables/useAccountQuotaForecast.ts b/frontend/src/views/accounts/composables/useAccountQuotaForecast.ts
index 2e8cee18d..0494e1885 100644
--- a/frontend/src/views/accounts/composables/useAccountQuotaForecast.ts
+++ b/frontend/src/views/accounts/composables/useAccountQuotaForecast.ts
@@ -1,6 +1,6 @@
 import type { Ref } from 'vue'
 import type { Account, AccountQuotaForecastResponse } from '@/api'
-import { toast } from '@codex-proxy/ui'
+import { ZNotification } from '@codex-proxy/ui'
 import { onScopeDispose, shallowRef, watch } from 'vue'
 import { getAccountQuotaForecast, refreshAccountQuota } from '@/api'
 
@@ -66,7 +66,7 @@ export function useAccountQuotaForecast(
         return
       onAccountUpdated(result.account)
       if (accountId.value === targetAccountId && await load())
-        toast.success('额度已刷新')
+        ZNotification.success({ message: '额度已刷新' })
     }
     catch {
       if (!disposed && accountId.value === targetAccountId) {
diff --git a/frontend/src/views/accounts/composables/useAccountResetCredits.ts b/frontend/src/views/accounts/composables/useAccountResetCredits.ts
index 193416f6c..eccc53aaf 100644
--- a/frontend/src/views/accounts/composables/useAccountResetCredits.ts
+++ b/frontend/src/views/accounts/composables/useAccountResetCredits.ts
@@ -1,5 +1,5 @@
 import type { AccountResetCredit } from '@/api'
-import { toast } from '@codex-proxy/ui'
+import { ZNotification } from '@codex-proxy/ui'
 import { computed, shallowReactive, shallowRef, watch } from 'vue'
 
 import {
@@ -189,7 +189,7 @@ export function useAccountResetCredits(options: {
         || (result.code === 'already_redeemed' && operation.hasTransportFailure)
       target.pendingOperation = null
       if (!confirmed) {
-        toast.error(resetResultMessage(result.code))
+        ZNotification.error({ message: resetResultMessage(result.code) })
         await loadSessionCredits(target, true)
         return false
       }
@@ -201,7 +201,7 @@ export function useAccountResetCredits(options: {
       if (session.value === target)
         showConfirm.value = false
       options.onConsumed(operation.accountId)
-      toast.success(successMessage)
+      ZNotification.success({ message: successMessage })
       applyConfirmedConsumption(target, operation)
       await loadSessionCredits(target, true)
       return true
@@ -212,11 +212,11 @@ export function useAccountResetCredits(options: {
           ...operation,
           hasTransportFailure: true,
         }
-        toast.warning('消费结果暂不确定，重试会复用同一个请求标识', { duration: 5000 })
+        ZNotification.warning({ message: '消费结果暂不确定，重试会复用同一个请求标识', ...({ duration: 5000 }) })
       }
       else {
         target.pendingOperation = null
-        toast.error(errorMessage(error, '额度重置失败'))
+        ZNotification.error({ message: errorMessage(error, '额度重置失败') })
         await loadSessionCredits(target, true)
       }
       return false
diff --git a/frontend/src/views/accounts/composables/useAccountsQuery.ts b/frontend/src/views/accounts/composables/useAccountsQuery.ts
index 907155332..52b486158 100644
--- a/frontend/src/views/accounts/composables/useAccountsQuery.ts
+++ b/frontend/src/views/accounts/composables/useAccountsQuery.ts
@@ -1,4 +1,4 @@
-import type { BaseTableSort } from '@codex-proxy/ui'
+import type { TableSort } from '@codex-proxy/ui'
 import type { Account } from '@/api'
 
 import { computed, onMounted, shallowRef, watch } from 'vue'
@@ -10,7 +10,7 @@ export function useAccountsQuery() {
   const providerQuery = shallowRef('')
   const statusQuery = shallowRef('')
   const groupQuery = shallowRef('')
-  const sort = shallowRef<BaseTableSort>()
+  const sort = shallowRef<TableSort>()
   const accountSummary = shallowRef({
     total: 0,
     normal: 0,
@@ -55,7 +55,7 @@ export function useAccountsQuery() {
     void query.execute()
   }
 
-  function handleSortChange(nextSort: BaseTableSort | undefined) {
+  function handleSortChange(nextSort: TableSort | undefined) {
     sort.value = nextSort
     query.page.value = 1
     void query.execute()
diff --git a/frontend/src/views/accounts/constants.ts b/frontend/src/views/accounts/constants.ts
index f58554f47..a5bc7c3b5 100644
--- a/frontend/src/views/accounts/constants.ts
+++ b/frontend/src/views/accounts/constants.ts
@@ -31,7 +31,7 @@ export const accountColumns = defineTableColumns<Account>([
     kind: 'meta',
     size: 'md',
     align: 'center',
-    format: value => formatProviderLabel(typeof value === 'string' ? value : null),
+    formatter: value => formatProviderLabel(typeof value === 'string' ? value : null),
   },
   { key: 'status', label: '状态', kind: 'status', align: 'left', sortable: true },
   { key: 'planType', label: '订阅', kind: 'status', sortable: true },
@@ -49,7 +49,7 @@ export const accountColumns = defineTableColumns<Account>([
     label: '令牌过期',
     kind: 'datetime',
     sortable: 'expiresAt',
-    format: value => optionalAccountCell(value),
+    formatter: value => optionalAccountCell(value),
     emptyText: '',
   },
   { key: 'actions', label: '操作', kind: 'actions', size: 'lg', hideable: false },
diff --git a/frontend/src/views/accounts/index.vue b/frontend/src/views/accounts/index.vue
index 206802147..85b133c0f 100644
--- a/frontend/src/views/accounts/index.vue
+++ b/frontend/src/views/accounts/index.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { BaseCard, BaseCheckbox, BaseConfirmModal, BasePageHeader, BaseTable, BaseTableColumnSettings, BaseTablePagination, useTableColumns } from '@codex-proxy/ui'
+import { useTableColumns, ZCard, ZCheckbox, ZConfirmDialog, ZPageHeader, ZPagination, ZTable, ZTableColumnSettings } from '@codex-proxy/ui'
 
 import { ChevronDown } from '@lucide/vue'
 import { ref } from 'vue'
@@ -195,7 +195,7 @@ const {
 
 <template>
   <div class="flex min-h-0 w-full flex-col xl:h-full xl:overflow-hidden">
-    <BasePageHeader
+    <ZPageHeader
       class="h-17"
       title="账号管理"
       description="维护账号池，查看可用性、配额与使用状态"
@@ -203,7 +203,7 @@ const {
 
     <AccountOverviewCards :summary="accountSummary" />
 
-    <BaseCard
+    <ZCard
       class="mt-4 flex flex-col xl:h-[calc(100dvh-250px)] xl:min-h-125"
     >
       <template #header>
@@ -227,7 +227,7 @@ const {
           @edit-selected="openBatchEdit"
         >
           <template #actions>
-            <BaseTableColumnSettings
+            <ZTableColumnSettings
               :options="columnOptions"
               @change="setColumnVisible"
               @reorder="setColumnOrder"
@@ -239,10 +239,10 @@ const {
 
       <template #body>
         <div class="flex min-h-0 flex-col xl:h-full">
-          <BaseTable
+          <ZTable
             class="h-100! min-h-100 flex-none [--cp-table-row-height:72px] xl:h-auto! xl:min-h-0 xl:flex-1"
             :columns="visibleColumns"
-            :rows="accounts"
+            :data="accounts"
             :loading="loading"
             :selected-row-keys="selectedRowKeys"
             :expanded-row-keys="expandedRowKeys"
@@ -265,18 +265,18 @@ const {
             </template>
 
             <template #header-selection>
-              <BaseCheckbox
+              <ZCheckbox
                 :model-value="allSelected"
                 :indeterminate="indeterminate"
-                label="选择当前页账号"
+                aria-label="选择当前页账号"
                 @update:model-value="toggleAll"
               />
             </template>
 
             <template #selection="{ row }">
-              <BaseCheckbox
+              <ZCheckbox
                 :model-value="selectedIds.has(row.id)"
-                label="选择账号"
+                aria-label="选择账号"
                 @update:model-value="toggleSelection(row.id)"
               />
             </template>
@@ -357,16 +357,16 @@ const {
                 <AccountUsagePanel :account="row" />
               </div>
             </template>
-          </BaseTable>
-          <BaseTablePagination
-            :pagination="accountPagination"
-            :loading="loading"
-            @page-change="handlePageChange"
-            @page-size-change="handlePageSizeChange"
+          </ZTable>
+          <ZPagination
+            v-bind="accountPagination"
+            :disabled="loading"
+            @current-change="handlePageChange"
+            @size-change="handlePageSizeChange"
           />
         </div>
       </template>
-    </BaseCard>
+    </ZCard>
 
     <AccountConnectionTestModal
       v-model="showConnectionTestModal"
@@ -458,7 +458,7 @@ const {
       @save="saveBatchEdit"
     />
 
-    <BaseConfirmModal
+    <ZConfirmDialog
       v-model="showDeleteModal"
       title="确认删除"
       description="删除后该账号将不再参与调度，此操作不可撤销"
@@ -470,9 +470,9 @@ const {
       <p class="m-0">
         确定要删除选中的 {{ deleteCount }} 个账号吗？此操作不可撤销
       </p>
-    </BaseConfirmModal>
+    </ZConfirmDialog>
 
-    <BaseConfirmModal
+    <ZConfirmDialog
       v-model="showSingleDeleteModal"
       title="删除账号"
       description="删除后该账号将不再参与调度，此操作不可撤销"
@@ -491,6 +491,6 @@ const {
         }}
         吗？
       </p>
-    </BaseConfirmModal>
+    </ZConfirmDialog>
   </div>
 </template>
diff --git a/frontend/src/views/dashboard/components/AccountOverviewCard.vue b/frontend/src/views/dashboard/components/AccountOverviewCard.vue
index 0d3d8b7f2..026ba6209 100644
--- a/frontend/src/views/dashboard/components/AccountOverviewCard.vue
+++ b/frontend/src/views/dashboard/components/AccountOverviewCard.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { dashboardSnapshotView, MetricTone } from '../presenter'
-import { BaseCard, BaseEmpty } from '@codex-proxy/ui'
+import { ZCard, ZEmpty } from '@codex-proxy/ui'
 
 import { CircleCheck, RefreshCw, ShieldAlert, TriangleAlert } from '@lucide/vue'
 import { computed } from 'vue'
@@ -160,7 +160,7 @@ const statusBars = computed(() => {
 </script>
 
 <template>
-  <BaseCard as="article" class="w-full xl:h-112.5">
+  <ZCard as="article" class="w-full xl:h-112.5">
     <div
       class="grid xl:grid-cols-[minmax(0,0.9fr)_minmax(0,1.28fr)_minmax(280px,0.9fr)] xl:gap-7"
     >
@@ -225,7 +225,7 @@ const statusBars = computed(() => {
         <div
           class="mt-5 flex w-full flex-col gap-2 overflow-hidden xl:mt-6.75 xl:h-82.5 xl:gap-2.5"
         >
-          <BaseEmpty
+          <ZEmpty
             v-if="accounts.length === 0"
             title="暂无账号请求记录"
             surface="inset"
@@ -340,5 +340,5 @@ const statusBars = computed(() => {
         </div>
       </section>
     </div>
-  </BaseCard>
+  </ZCard>
 </template>
diff --git a/frontend/src/views/dashboard/components/DashboardContent.vue b/frontend/src/views/dashboard/components/DashboardContent.vue
index c28289197..6b8c6c181 100644
--- a/frontend/src/views/dashboard/components/DashboardContent.vue
+++ b/frontend/src/views/dashboard/components/DashboardContent.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { dashboardSnapshotView, dashboardTrendView } from '../presenter'
 import type { DashboardTrendKind } from '@/api/modules/dashboard'
-import { BaseIconButton, BasePageHeader } from '@codex-proxy/ui'
+import { ZIconButton, ZPageHeader } from '@codex-proxy/ui'
 
 import { RefreshCw } from '@lucide/vue'
 
@@ -53,16 +53,16 @@ const trendKind = defineModel<DashboardTrendKind>('trendKind', { required: true
 
 <template>
   <div class="w-full">
-    <BasePageHeader title="系统概览">
+    <ZPageHeader title="系统概览">
       <template #description>
         <span>当日统计</span>
         <DashboardHeartbeat :updated-at="lastRefreshedAt" />
       </template>
       <template #actions>
-        <BaseIconButton
+        <ZIconButton
           class="text-cp-primary-text"
-          size="md"
-          label="刷新概览"
+          size="default"
+          aria-label="刷新概览"
           :loading="loading || refreshing"
           :disabled="loading || refreshing"
           @click="emit('refresh')"
@@ -71,9 +71,9 @@ const trendKind = defineModel<DashboardTrendKind>('trendKind', { required: true
             <RefreshCw class="animate-spin motion-reduce:animate-none" :size="19" />
           </template>
           <RefreshCw :size="19" />
-        </BaseIconButton>
+        </ZIconButton>
       </template>
-    </BasePageHeader>
+    </ZPageHeader>
 
     <section
       class="mt-6 grid grid-cols-1 gap-4 md:grid-cols-2 2xl:grid-cols-4 2xl:gap-6"
diff --git a/frontend/src/views/dashboard/components/MetricCard.vue b/frontend/src/views/dashboard/components/MetricCard.vue
index 87964605e..40e281289 100644
--- a/frontend/src/views/dashboard/components/MetricCard.vue
+++ b/frontend/src/views/dashboard/components/MetricCard.vue
@@ -2,7 +2,7 @@
 import type { EChartsOption } from 'echarts'
 import type { MetricCardView, MetricTone } from '../presenter'
 
-import { BaseCard, BaseMotionIcon } from '@codex-proxy/ui'
+import { ZCard, ZMotionIcon } from '@codex-proxy/ui'
 import { computed } from 'vue'
 
 import AnimatedMetricValue from '@/components/AnimatedMetricValue.vue'
@@ -71,14 +71,14 @@ const sparklineOption = computed<EChartsOption | null>(() => {
 </script>
 
 <template>
-  <BaseCard as="article" padding="compact" class="relative h-38.5 w-full">
+  <ZCard as="article" padding="compact" class="relative h-38.5 w-full">
     <div class="flex items-start gap-3">
-      <BaseMotionIcon
+      <ZMotionIcon
         class="inline-flex size-8.5 shrink-0 items-center justify-center rounded-cp-lg"
         :class="metricToneIconClasses[metric.tone]"
       >
         <component :is="metric.icon" :size="18" />
-      </BaseMotionIcon>
+      </ZMotionIcon>
       <span class="mt-1 text-cp leading-[1.15] font-emphasis text-cp-text-secondary">{{ metric.title }}</span>
     </div>
 
@@ -128,5 +128,5 @@ const sparklineOption = computed<EChartsOption | null>(() => {
         </b>
       </span>
     </div>
-  </BaseCard>
+  </ZCard>
 </template>
diff --git a/frontend/src/views/dashboard/components/RequestTrendCard.vue b/frontend/src/views/dashboard/components/RequestTrendCard.vue
index 7de97786a..9214e1113 100644
--- a/frontend/src/views/dashboard/components/RequestTrendCard.vue
+++ b/frontend/src/views/dashboard/components/RequestTrendCard.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { dashboardTrendView, normalizeDashboardTrendKind } from '../presenter'
 
-import { BaseCard, BaseEmpty, BaseSegmented } from '@codex-proxy/ui'
+import { ZCard, ZEmpty, ZSegmented } from '@codex-proxy/ui'
 import { toRef } from 'vue'
 import BaseChart from '@/components/charts/BaseChart.vue'
 import { useRequestTrendChart } from '../composables/useRequestTrendChart'
@@ -42,11 +42,11 @@ const {
 </script>
 
 <template>
-  <BaseCard as="article" title="使用趋势" class="min-h-95 w-full">
+  <ZCard as="article" title="使用趋势" class="min-h-95 w-full">
     <template #actions>
-      <BaseSegmented
+      <ZSegmented
         v-model="activeKind"
-        label="趋势指标"
+        aria-label="趋势指标"
         :options="tabs"
         class="w-full max-w-61.5 sm:w-61.5"
         @update:model-value="handleTrendChange"
@@ -95,7 +95,7 @@ const {
 
         <div class="relative h-55 w-full overflow-hidden">
           <BaseChart v-if="hasSamples" :option="chartOption" :height="220" />
-          <BaseEmpty
+          <ZEmpty
             v-else-if="!loading"
             surface="none"
             :title="error || '暂无趋势数据'"
@@ -104,5 +104,5 @@ const {
         </div>
       </div>
     </template>
-  </BaseCard>
+  </ZCard>
 </template>
diff --git a/frontend/src/views/dashboard/components/UsageRecordCard.vue b/frontend/src/views/dashboard/components/UsageRecordCard.vue
index f61e6cba6..0d523c25d 100644
--- a/frontend/src/views/dashboard/components/UsageRecordCard.vue
+++ b/frontend/src/views/dashboard/components/UsageRecordCard.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { dashboardSnapshotView } from '../presenter'
 
-import { BaseCard } from '@codex-proxy/ui'
+import { ZCard } from '@codex-proxy/ui'
 import { usageRecordColumns } from '@/components/usage/shared/columns'
 import UsageRecordsTable from '@/components/usage/UsageRecordsTable.vue'
 
@@ -17,7 +17,7 @@ const dashboardUsageRecordColumns = usageRecordColumns.filter(
 </script>
 
 <template>
-  <BaseCard
+  <ZCard
     as="article"
     title="使用记录"
     description="最近 10 条成功请求"
@@ -33,5 +33,5 @@ const dashboardUsageRecordColumns = usageRecordColumns.filter(
         />
       </div>
     </template>
-  </BaseCard>
+  </ZCard>
 </template>
diff --git a/frontend/src/views/dashboard/components/WireProfileCard.vue b/frontend/src/views/dashboard/components/WireProfileCard.vue
index d8e560227..2902ffa30 100644
--- a/frontend/src/views/dashboard/components/WireProfileCard.vue
+++ b/frontend/src/views/dashboard/components/WireProfileCard.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { BaseCard, BaseEmpty, BaseSegmented } from '@codex-proxy/ui'
+import { ZCard, ZEmpty, ZSegmented } from '@codex-proxy/ui'
 
 import { Box, CheckCircle2, Monitor, RefreshCw, ShieldCheck, Terminal, TriangleAlert } from '@lucide/vue'
 import { computed, shallowRef, watch } from 'vue'
@@ -178,16 +178,16 @@ watch(
 </script>
 
 <template>
-  <BaseCard as="article" class="flex min-h-95 w-full flex-col">
+  <ZCard as="article" class="flex min-h-95 w-full flex-col">
     <template #header>
       <div class="flex min-w-0 flex-wrap items-start justify-between gap-3">
         <h2 class="m-0 pt-0.5 text-xl leading-[1.15] font-heavy text-cp-text text-balance">
           通用上游身份
         </h2>
         <div v-if="providerOptions.length > 1" class="min-w-0 max-w-full overflow-x-auto">
-          <BaseSegmented
+          <ZSegmented
             v-model="activeProvider"
-            label="上游平台"
+            aria-label="上游平台"
             :options="providerOptions"
             :style="{ width: `${providerOptions.length * 40 + 4}px` }"
             display="icon"
@@ -197,7 +197,7 @@ watch(
     </template>
 
     <template #body>
-      <BaseEmpty v-if="!profile" title="暂无请求身份" surface="inset" class="min-h-71.75 flex-1 place-content-center" />
+      <ZEmpty v-if="!profile" title="暂无请求身份" surface="inset" class="min-h-71.75 flex-1 place-content-center" />
 
       <div v-else class="flex flex-1">
         <section
@@ -303,5 +303,5 @@ watch(
         </section>
       </div>
     </template>
-  </BaseCard>
+  </ZCard>
 </template>
diff --git a/frontend/src/views/groups/components/AccountGroupActions.vue b/frontend/src/views/groups/components/AccountGroupActions.vue
index 74444911d..5e26f994b 100644
--- a/frontend/src/views/groups/components/AccountGroupActions.vue
+++ b/frontend/src/views/groups/components/AccountGroupActions.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { AccountGroup } from '@/api'
-import { BaseIconButton } from '@codex-proxy/ui'
+import { ZIconButton } from '@codex-proxy/ui'
 
 import { Pencil, Power, Trash2 } from '@lucide/vue'
 
@@ -18,18 +18,16 @@ const emit = defineEmits<{
 
 <template>
   <div class="flex items-center gap-1">
-    <BaseIconButton
-      variant="ghost"
-      size="sm"
-      label="编辑分组"
+    <ZIconButton
+      size="small"
+      aria-label="编辑分组"
       @click.stop="emit('edit', group)"
     >
       <Pencil class="size-3.5 text-cp-link" />
-    </BaseIconButton>
-    <BaseIconButton
-      variant="ghost"
-      size="sm"
-      :label="group.enabled ? '禁用分组' : '启用分组'"
+    </ZIconButton>
+    <ZIconButton
+      size="small"
+      :aria-label="group.enabled ? '禁用分组' : '启用分组'"
       :loading="updatingStatus"
       @click.stop="emit('toggle', group)"
     >
@@ -37,15 +35,14 @@ const emit = defineEmits<{
         class="size-3.5"
         :class="group.enabled ? 'text-cp-warning' : 'text-cp-success'"
       />
-    </BaseIconButton>
-    <BaseIconButton
-      variant="ghost"
-      size="sm"
-      label="删除分组"
+    </ZIconButton>
+    <ZIconButton
+      size="small"
+      aria-label="删除分组"
       :disabled="deleting"
       @click.stop="emit('delete', group)"
     >
       <Trash2 class="size-3.5 text-cp-error" />
-    </BaseIconButton>
+    </ZIconButton>
   </div>
 </template>
diff --git a/frontend/src/views/groups/components/AccountGroupFilters.vue b/frontend/src/views/groups/components/AccountGroupFilters.vue
index 146328d13..fddeae2cb 100644
--- a/frontend/src/views/groups/components/AccountGroupFilters.vue
+++ b/frontend/src/views/groups/components/AccountGroupFilters.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { BaseButton, BaseInput, BaseSelect } from '@codex-proxy/ui'
+import { ZButton, ZInput, ZSelect } from '@codex-proxy/ui'
 
 import { Plus, Search, Trash2 } from '@lucide/vue'
 import { accountGroupStatusOptions } from '../constants'
@@ -18,7 +18,7 @@ const status = defineModel<string>('status', { required: true })
 
 <template>
   <div class="flex w-full flex-col gap-3 sm:flex-row sm:items-center">
-    <BaseInput
+    <ZInput
       v-model="search"
       class="sm:w-80"
       aria-label="搜索账号分组"
@@ -27,17 +27,17 @@ const status = defineModel<string>('status', { required: true })
       <template #prefix>
         <Search class="size-4.5 text-cp-text-tertiary" />
       </template>
-    </BaseInput>
-    <BaseSelect
+    </ZInput>
+    <ZSelect
       v-model="status"
       :options="accountGroupStatusOptions"
       aria-label="按分组状态筛选"
       class="w-40"
     />
     <div class="flex shrink-0 items-center justify-end gap-2 sm:ml-auto">
-      <BaseButton
+      <ZButton
         v-if="selectedCount > 0"
-        variant="destructive"
+        type="danger" variant="plain"
         :disabled="batchDeleting"
         @click="emit('deleteSelected')"
       >
@@ -45,13 +45,13 @@ const status = defineModel<string>('status', { required: true })
           <Trash2 class="size-4" />
         </template>
         删除选中 ({{ selectedCount }})
-      </BaseButton>
-      <BaseButton variant="primary" @click="emit('create')">
+      </ZButton>
+      <ZButton type="primary" @click="emit('create')">
         <template #icon>
           <Plus class="size-4" />
         </template>
         创建分组
-      </BaseButton>
+      </ZButton>
     </div>
   </div>
 </template>
diff --git a/frontend/src/views/groups/components/AccountGroupFormModal.vue b/frontend/src/views/groups/components/AccountGroupFormModal.vue
index f9b6b124e..c0fedfdc0 100644
--- a/frontend/src/views/groups/components/AccountGroupFormModal.vue
+++ b/frontend/src/views/groups/components/AccountGroupFormModal.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { AccountGroupFormValue } from '../composables/useAccountGroups'
 import type { AccountGroup } from '@/api'
-import { BaseButton, BaseColorPicker, BaseForm, BaseFormItem, BaseInput, BaseModal, BaseSegmented, BaseTextarea } from '@codex-proxy/ui'
+import { ZButton, ZColorPicker, ZDialog, ZForm, ZFormItem, ZInput, ZSegmented, ZTextarea } from '@codex-proxy/ui'
 
 import { computed } from 'vue'
 import { ACCOUNT_GROUP_COLOR_PRESETS } from '../constants'
@@ -22,35 +22,35 @@ const description = computed(() => props.group
 </script>
 
 <template>
-  <BaseModal
+  <ZDialog
     v-model="open"
     :title="title"
     :description="description"
-    size="md"
-    :dismissible="!saving"
+    width="36rem"
+    :show-close="!saving" :close-on-click-modal="!saving" :close-on-press-escape="!saving"
   >
-    <BaseForm class="grid gap-5">
-      <BaseFormItem label="分组名称" required>
-        <BaseInput
+    <ZForm class="grid gap-5">
+      <ZFormItem label="分组名称" required>
+        <ZInput
           v-model="form.name"
           aria-label="分组名称"
           placeholder="例如：生产账号"
           :disabled="saving"
         />
-      </BaseFormItem>
-      <BaseFormItem label="分组颜色" required>
-        <BaseColorPicker
+      </ZFormItem>
+      <ZFormItem label="分组颜色" required>
+        <ZColorPicker
           v-model="form.color"
-          label="选择分组颜色"
+          aria-label="选择分组颜色"
           :presets="ACCOUNT_GROUP_COLOR_PRESETS"
           :disabled="saving"
         />
-      </BaseFormItem>
-      <BaseFormItem label="Fast 模式">
-        <BaseSegmented
+      </ZFormItem>
+      <ZFormItem label="Fast 模式">
+        <ZSegmented
           v-model="form.fastMode"
           class="w-64 max-w-full"
-          label="Fast 模式"
+          aria-label="Fast 模式"
           :options="[
             { label: '默认', value: 'default' },
             { label: '开启', value: 'enabled' },
@@ -58,30 +58,30 @@ const description = computed(() => props.group
           ]"
           :disabled="saving"
         />
-      </BaseFormItem>
-      <BaseFormItem label="描述（可选）">
-        <BaseTextarea
+      </ZFormItem>
+      <ZFormItem label="描述（可选）">
+        <ZTextarea
           v-model="form.description"
           aria-label="分组描述"
           :rows="4"
           placeholder="说明这个分组的用途..."
           :disabled="saving"
         />
-      </BaseFormItem>
-    </BaseForm>
+      </ZFormItem>
+    </ZForm>
 
     <template #footer>
-      <BaseButton variant="secondary" :disabled="saving" @click="open = false">
+      <ZButton :disabled="saving" @click="open = false">
         取消
-      </BaseButton>
-      <BaseButton
-        variant="primary"
+      </ZButton>
+      <ZButton
+        type="primary"
         :loading="saving"
         :disabled="!form.name.trim()"
         @click="emit('save')"
       >
         保存分组
-      </BaseButton>
+      </ZButton>
     </template>
-  </BaseModal>
+  </ZDialog>
 </template>
diff --git a/frontend/src/views/groups/composables/useAccountGroups.ts b/frontend/src/views/groups/composables/useAccountGroups.ts
index 19d101701..8155b1197 100644
--- a/frontend/src/views/groups/composables/useAccountGroups.ts
+++ b/frontend/src/views/groups/composables/useAccountGroups.ts
@@ -1,5 +1,5 @@
 import type { AccountGroup, ApiKey, FastMode } from '@/api'
-import { normalizeRgbaHexColor, toast } from '@codex-proxy/ui'
+import { normalizeRgbaHexColor, ZNotification } from '@codex-proxy/ui'
 
 import { computed, onMounted, ref, shallowRef, watch } from 'vue'
 import {
@@ -131,12 +131,12 @@ export function useAccountGroups() {
       return
     const name = form.value.name.trim()
     if (!name) {
-      toast.warning('请输入分组名称')
+      ZNotification.warning({ message: '请输入分组名称' })
       return
     }
     const color = normalizeRgbaHexColor(form.value.color)
     if (!color) {
-      toast.warning('请选择有效的分组颜色')
+      ZNotification.warning({ message: '请选择有效的分组颜色' })
       return
     }
 
@@ -157,7 +157,7 @@ export function useAccountGroups() {
       }
       showFormModal.value = false
       await Promise.all([query.execute(), loadReferenceKeys()])
-      toast.success(updating ? '分组已更新' : '分组已创建')
+      ZNotification.success({ message: updating ? '分组已更新' : '分组已创建' })
     })
   }
 
@@ -178,7 +178,7 @@ export function useAccountGroups() {
       await disableAccountGroup({ id: group.id })
       showDisableModal.value = false
       await query.execute()
-      toast.success('分组已禁用')
+      ZNotification.success({ message: '分组已禁用' })
     })
   }
 
@@ -188,7 +188,7 @@ export function useAccountGroups() {
         const mutation = group.enabled ? disableAccountGroup : enableAccountGroup
         await mutation({ id: group.id })
         await query.execute()
-        toast.success(group.enabled ? '分组已禁用' : '分组已启用')
+        ZNotification.success({ message: group.enabled ? '分组已禁用' : '分组已启用' })
       }
       catch {}
     })
@@ -210,7 +210,7 @@ export function useAccountGroups() {
       selectedIds.value = remaining
       showDeleteModal.value = false
       await query.execute()
-      toast.success('分组已删除')
+      ZNotification.success({ message: '分组已删除' })
     }, { onError: () => void query.execute() })
   }
 
@@ -239,16 +239,14 @@ export function useAccountGroups() {
 
       await query.execute()
       showBatchDeleteModal.value = false
-      toast.success(`已删除 ${deletedCount} 个分组`)
+      ZNotification.success({ message: `已删除 ${deletedCount} 个分组` })
     }, {
       errorText: false,
       onError: (error) => {
         void query.execute().catch(() => undefined)
-        toast.error(
-          deletedCount > 0
-            ? `已删除 ${deletedCount} 个分组，其余未删除：${errorMessage(error, '操作失败')}`
-            : errorMessage(error, '批量删除失败'),
-        )
+        ZNotification.error({ message: deletedCount > 0
+          ? `已删除 ${deletedCount} 个分组，其余未删除：${errorMessage(error, '操作失败')}`
+          : errorMessage(error, '批量删除失败') })
       },
     })
   }
diff --git a/frontend/src/views/groups/index.vue b/frontend/src/views/groups/index.vue
index d2e7f9824..9d7bec144 100644
--- a/frontend/src/views/groups/index.vue
+++ b/frontend/src/views/groups/index.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { BaseCard, BaseCheckbox, BaseConfirmModal, BasePageHeader, BaseTable, BaseTablePagination } from '@codex-proxy/ui'
+import { ZCard, ZCheckbox, ZConfirmDialog, ZPageHeader, ZPagination, ZTable } from '@codex-proxy/ui'
 import { Zap, ZapOff } from '@lucide/vue'
 import { usePageSelection } from '@/composables/usePageSelection'
 import AccountGroupActions from './components/AccountGroupActions.vue'
@@ -49,13 +49,13 @@ const { allSelected, indeterminate, selectedRowKeys, toggleSelection, toggleAll
 
 <template>
   <div class="flex h-full min-h-0 w-full flex-col overflow-hidden">
-    <BasePageHeader
+    <ZPageHeader
       class="h-17"
       title="分组管理"
       description="将账号归类管理，并为每个 API 密钥指定可使用的账号"
     />
 
-    <BaseCard
+    <ZCard
       class="mt-5 flex h-[calc(100dvh-136px)] min-h-125 flex-col"
     >
       <template #header>
@@ -71,26 +71,26 @@ const { allSelected, indeterminate, selectedRowKeys, toggleSelection, toggleAll
 
       <template #body>
         <div class="flex h-full min-h-0 flex-col">
-          <BaseTable
+          <ZTable
             class="min-h-0 flex-1"
             :columns="accountGroupColumns"
-            :rows="groups"
+            :data="groups"
             :loading="loading"
             :selected-row-keys="selectedRowKeys"
             empty-text="暂无分组，请点击创建分组创建"
           >
             <template #header-selection>
-              <BaseCheckbox
+              <ZCheckbox
                 :model-value="allSelected"
                 :indeterminate="indeterminate"
-                label="选择当前页分组"
+                aria-label="选择当前页分组"
                 @update:model-value="toggleAll"
               />
             </template>
             <template #selection="{ row }">
-              <BaseCheckbox
+              <ZCheckbox
                 :model-value="selectedIds.has(row.id)"
-                label="选择分组"
+                aria-label="选择分组"
                 @update:model-value="toggleSelection(row.id)"
               />
             </template>
@@ -162,16 +162,16 @@ const { allSelected, indeterminate, selectedRowKeys, toggleSelection, toggleAll
                 @delete="requestDelete"
               />
             </template>
-          </BaseTable>
-          <BaseTablePagination
-            :pagination="pagination"
-            :loading="loading"
-            @page-change="handlePageChange"
-            @page-size-change="handlePageSizeChange"
+          </ZTable>
+          <ZPagination
+            v-bind="pagination"
+            :disabled="loading"
+            @current-change="handlePageChange"
+            @size-change="handlePageSizeChange"
           />
         </div>
       </template>
-    </BaseCard>
+    </ZCard>
 
     <AccountGroupFormModal
       v-model="showFormModal"
@@ -181,7 +181,7 @@ const { allSelected, indeterminate, selectedRowKeys, toggleSelection, toggleAll
       @save="save"
     />
 
-    <BaseConfirmModal
+    <ZConfirmDialog
       v-model="showBatchDeleteModal"
       title="确认删除"
       description="删除后这些分组将立即失效，此操作不可撤销"
@@ -193,9 +193,9 @@ const { allSelected, indeterminate, selectedRowKeys, toggleSelection, toggleAll
       <p class="m-0">
         确定删除选中的 {{ deleteCount }} 个分组吗？账号本身不会被删除
       </p>
-    </BaseConfirmModal>
+    </ZConfirmDialog>
 
-    <BaseConfirmModal
+    <ZConfirmDialog
       v-model="showDisableModal"
       title="禁用账号分组"
       description="禁用后，使用该分组的 API 密钥将无法再使用其中的账号"
@@ -212,9 +212,9 @@ const { allSelected, indeterminate, selectedRowKeys, toggleSelection, toggleAll
       <p v-else-if="pendingDisableGroup?.clientKeyCount" class="mt-2 mb-0 text-cp-warning-text">
         将影响 {{ pendingDisableGroup.clientKeyCount }} 个 API 密钥
       </p>
-    </BaseConfirmModal>
+    </ZConfirmDialog>
 
-    <BaseConfirmModal
+    <ZConfirmDialog
       v-model="showDeleteModal"
       title="删除账号分组"
       description="删除后该分组将立即失效，此操作不可撤销"
@@ -226,6 +226,6 @@ const { allSelected, indeterminate, selectedRowKeys, toggleSelection, toggleAll
       <p class="m-0">
         确定删除“{{ pendingDeleteGroup?.name || '该分组' }}”吗？账号本身不会被删除
       </p>
-    </BaseConfirmModal>
+    </ZConfirmDialog>
   </div>
 </template>
diff --git a/frontend/src/views/key-usage/components/KeyUsageBudget.vue b/frontend/src/views/key-usage/components/KeyUsageBudget.vue
index ad2b93e3b..9f53fc704 100644
--- a/frontend/src/views/key-usage/components/KeyUsageBudget.vue
+++ b/frontend/src/views/key-usage/components/KeyUsageBudget.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { KeyUsageBudget } from '@/api/modules/key-usage'
-import { BaseCard } from '@codex-proxy/ui'
+import { ZCard } from '@codex-proxy/ui'
 import { Clock3, Gauge, Network } from '@lucide/vue'
 import { computed } from 'vue'
 import { money } from '../utils/format'
@@ -18,7 +18,7 @@ const windows = computed(() => [
 </script>
 
 <template>
-  <BaseCard title="额度概览">
+  <ZCard title="额度概览">
     <div class="flex flex-1 flex-col justify-between gap-6">
       <div class="grid flex-1 gap-6 sm:grid-cols-2">
         <div v-for="window in windows" :key="window.label" class="flex min-w-0 flex-col justify-between gap-4">
@@ -32,7 +32,7 @@ const windows = computed(() => [
             </div>
           </div>
           <div>
-            <div class="grid grid-cols-[repeat(20,minmax(0,1fr))] gap-0.75" :aria-label="window.limited ? `已用 ${window.percentage.toFixed(1)}%` : '不限额'">
+            <div class="grid grid-cols-20 gap-0.75" :aria-label="window.limited ? `已用 ${window.percentage.toFixed(1)}%` : '不限额'">
               <span v-for="block in 20" :key="block" class="h-7 rounded-xs" :class="block <= Math.ceil(Math.min(100, window.percentage) / 5) ? (window.percentage >= 100 ? 'bg-cp-error' : 'bg-cp-success') : 'bg-cp-fill-secondary'" />
             </div>
             <div class="mt-2 flex justify-between gap-2 font-mono text-cp-xs text-cp-text-secondary">
@@ -54,5 +54,5 @@ const windows = computed(() => [
         </div>
       </div>
     </div>
-  </BaseCard>
+  </ZCard>
 </template>
diff --git a/frontend/src/views/key-usage/components/KeyUsageHeader.vue b/frontend/src/views/key-usage/components/KeyUsageHeader.vue
index c9d54341b..5af474b0c 100644
--- a/frontend/src/views/key-usage/components/KeyUsageHeader.vue
+++ b/frontend/src/views/key-usage/components/KeyUsageHeader.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { BaseButton, BaseIconButton, BasePageHeader, BaseSelect } from '@codex-proxy/ui'
+import { ZButton, ZIconButton, ZPageHeader, ZSelect } from '@codex-proxy/ui'
 import { Info, KeyRound, LogOut, Moon, RefreshCw, Sun, Terminal } from '@lucide/vue'
 import { shallowRef } from 'vue'
 import { useRouter } from 'vue-router'
@@ -28,7 +28,7 @@ async function logout() {
 </script>
 
 <template>
-  <BasePageHeader title="使用统计">
+  <ZPageHeader title="使用统计">
     <template #description>
       <span class="flex min-w-0 flex-wrap items-center gap-x-3 gap-y-1.5">
         <span class="min-w-0 truncate text-cp font-semibold text-cp-text" :title="name">
@@ -42,31 +42,31 @@ async function logout() {
     </template>
     <template #actions>
       <div class="key-usage-actions flex max-w-[calc(100vw-32px)] flex-wrap items-center justify-end gap-2">
-        <BaseIconButton label="关于" variant="secondary" @click="$emit('openAbout')">
+        <ZIconButton aria-label="关于" variant="solid" @click="$emit('openAbout')">
           <Info class="size-4" />
-        </BaseIconButton>
-        <BaseButton variant="secondary" :loading="configuring" @click="$emit('configure')">
+        </ZIconButton>
+        <ZButton :loading="configuring" @click="$emit('configure')">
           <Terminal class="size-4" />
           密钥配置
-        </BaseButton>
-        <BaseSelect v-model="period" aria-label="统计时间范围" class="w-29" :options="[{ label: '今天', value: 'today' }, { label: '近 7 天', value: '7d' }, { label: '近 30 天', value: '30d' }]" />
-        <BaseSelect v-model="refreshInterval" aria-label="自动刷新频率" class="w-30" :options="[{ label: '30 秒刷新', value: '30' }, { label: '60 秒刷新', value: '60' }, { label: '暂停刷新', value: '0' }]" />
-        <BaseIconButton label="刷新用量" variant="secondary" :loading="refreshing" @click="$emit('refresh')">
+        </ZButton>
+        <ZSelect v-model="period" aria-label="统计时间范围" class="w-29" :options="[{ label: '今天', value: 'today' }, { label: '近 7 天', value: '7d' }, { label: '近 30 天', value: '30d' }]" />
+        <ZSelect v-model="refreshInterval" aria-label="自动刷新频率" class="w-30" :options="[{ label: '30 秒刷新', value: '30' }, { label: '60 秒刷新', value: '60' }, { label: '暂停刷新', value: '0' }]" />
+        <ZIconButton aria-label="刷新用量" variant="solid" :loading="refreshing" @click="$emit('refresh')">
           <template #loading>
             <RefreshCw class="size-4 animate-spin motion-reduce:animate-none" />
           </template>
           <RefreshCw class="size-4" />
-        </BaseIconButton>
-        <BaseIconButton label="切换主题" variant="secondary" @click="theme.toggleTheme($event)">
+        </ZIconButton>
+        <ZIconButton aria-label="切换主题" variant="solid" @click="theme.toggleTheme($event)">
           <Sun v-if="theme.effectiveTheme === 'dark'" class="size-4" />
           <Moon v-else class="size-4" />
-        </BaseIconButton>
-        <BaseIconButton label="退出登录" variant="secondary" :disabled="loggingOut" @click="logout">
+        </ZIconButton>
+        <ZIconButton aria-label="退出登录" variant="solid" :disabled="loggingOut" @click="logout">
           <LogOut class="size-4" />
-        </BaseIconButton>
+        </ZIconButton>
       </div>
     </template>
-  </BasePageHeader>
+  </ZPageHeader>
 </template>
 
 <style scoped>
diff --git a/frontend/src/views/key-usage/components/KeyUsageRecords.vue b/frontend/src/views/key-usage/components/KeyUsageRecords.vue
index abf2f330f..fbe414427 100644
--- a/frontend/src/views/key-usage/components/KeyUsageRecords.vue
+++ b/frontend/src/views/key-usage/components/KeyUsageRecords.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { BaseTablePaginationState as Pagination } from '@codex-proxy/ui'
+import type { PaginationState as Pagination } from '@codex-proxy/ui'
 import type { KeyUsageRecord, KeyUsageRecordKind } from '@/api/modules/key-usage'
-import { BaseCard, BaseSegmented, BaseTable, BaseTablePagination, defineTableColumns } from '@codex-proxy/ui'
+import { defineTableColumns, ZCard, ZPagination, ZSegmented, ZTable } from '@codex-proxy/ui'
 import { computed } from 'vue'
 import UsageBillingCell from '@/components/usage/UsageBillingCell.vue'
 import UsageClientIpCell from '@/components/usage/UsageClientIpCell.vue'
@@ -31,15 +31,15 @@ const columns = computed(() => defineTableColumns<KeyUsageRecord>([
 </script>
 
 <template>
-  <BaseCard title="请求日志" description="当前请求记录">
+  <ZCard title="请求日志" description="当前请求记录">
     <template #actions>
-      <BaseSegmented v-model="kind" label="请求结果" :options="[{ label: '成功请求', value: 'success' }, { label: '错误记录', value: 'error' }]" />
+      <ZSegmented v-model="kind" aria-label="请求结果" :options="[{ label: '成功请求', value: 'success' }, { label: '错误记录', value: 'error' }]" />
     </template>
     <p v-if="error || stale" role="status" class="mt-0 mb-3 text-cp-sm text-cp-error-text">
       {{ error || '请求日志刷新失败，暂时保留上次结果' }}
     </p>
     <div class="flex h-120 min-h-0 overflow-hidden">
-      <BaseTable class="min-w-0 flex-1" :columns="columns" :rows="rows" :loading="loading" scrollbar-always-visible :empty-text="error ? '请求日志加载失败，请点击顶部刷新重试' : '所选条件下暂无记录'">
+      <ZTable class="min-w-0 flex-1" :columns="columns" :data="rows" :loading="loading" scrollbar-always-visible :empty-text="error ? '请求日志加载失败，请点击顶部刷新重试' : '所选条件下暂无记录'">
         <template #model="{ row }">
           <code class="block max-w-full truncate font-mono text-cp-sm leading-none font-heavy text-cp-text">{{ row.model || '—' }}</code>
         </template>
@@ -77,8 +77,8 @@ const columns = computed(() => defineTableColumns<KeyUsageRecord>([
         <template #userAgent="{ row }">
           <span class="block max-w-full wrap-break-word whitespace-normal font-mono text-cp-sm leading-[1.4] font-emphasis text-cp-text-secondary">{{ row.userAgent || '—' }}</span>
         </template>
-      </BaseTable>
+      </ZTable>
     </div>
-    <BaseTablePagination :pagination="pagination" :loading="loading" @page-change="$emit('pageChange', $event)" @page-size-change="$emit('pageSizeChange', $event)" />
-  </BaseCard>
+    <ZPagination v-bind="pagination" :disabled="loading" @current-change="$emit('pageChange', $event)" @size-change="$emit('pageSizeChange', $event)" />
+  </ZCard>
 </template>
diff --git a/frontend/src/views/key-usage/components/KeyUsageSkeleton.vue b/frontend/src/views/key-usage/components/KeyUsageSkeleton.vue
index ebcef290c..dad0d5375 100644
--- a/frontend/src/views/key-usage/components/KeyUsageSkeleton.vue
+++ b/frontend/src/views/key-usage/components/KeyUsageSkeleton.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { BaseCard, BaseSkeleton } from '@codex-proxy/ui'
+import { ZCard, ZSkeleton } from '@codex-proxy/ui'
 import { Gauge, Zap } from '@lucide/vue'
 import { keyUsageTokenMetrics } from '../utils/metrics'
 
@@ -12,47 +12,47 @@ const metrics = [
 <template>
   <span role="status" class="sr-only">正在加载用量</span>
   <section aria-label="用量汇总加载中" aria-busy="true" class="grid min-w-0 gap-4 xl:grid-cols-[minmax(340px,0.95fr)_minmax(0,3fr)]">
-    <BaseCard padding="compact" class="flex min-h-28 min-w-0 flex-col justify-between gap-4" aria-hidden="true">
+    <ZCard padding="compact" class="flex min-h-28 min-w-0 flex-col justify-between gap-4" aria-hidden="true">
       <div class="flex min-w-0 flex-1 items-center gap-3">
         <span class="inline-flex size-8.5 shrink-0 items-center justify-center rounded-cp-lg bg-cp-info-container text-cp-info-on-container"><Zap :size="18" /></span>
-        <BaseSkeleton class="h-8 w-44 max-w-full" />
-        <BaseSkeleton shape="text" class="w-12 shrink-0" />
+        <ZSkeleton class="h-8 w-44 max-w-full" />
+        <ZSkeleton shape="text" class="w-12 shrink-0" />
       </div>
       <div class="flex min-h-5 items-center justify-between gap-6">
-        <BaseSkeleton shape="text" class="w-20" />
-        <BaseSkeleton shape="text" class="w-30" />
+        <ZSkeleton shape="text" class="w-20" />
+        <ZSkeleton shape="text" class="w-30" />
       </div>
-    </BaseCard>
-    <BaseCard padding="compact" class="flex min-h-28 min-w-0 items-center" aria-hidden="true">
+    </ZCard>
+    <ZCard padding="compact" class="flex min-h-28 min-w-0 items-center" aria-hidden="true">
       <div class="grid w-full min-w-0 grid-cols-2 gap-x-6 gap-y-5 sm:grid-cols-3 2xl:grid-cols-6">
         <div v-for="item in metrics" :key="item.label" class="min-w-0">
           <div class="flex min-w-0 items-center gap-2 text-cp-lg leading-[1.15] font-emphasis text-cp-text-secondary">
             <component :is="item.icon" class="size-4.5 shrink-0" :class="item.tone" />{{ item.label }}
           </div>
-          <BaseSkeleton class="mt-5 h-6 w-20 max-w-full" />
+          <ZSkeleton class="mt-5 h-6 w-20 max-w-full" />
         </div>
       </div>
-    </BaseCard>
+    </ZCard>
   </section>
 
   <div class="grid min-w-0 gap-5 xl:grid-cols-[minmax(0,1.4fr)_minmax(400px,1fr)]">
-    <BaseCard title="使用趋势" description="用量随时间的变化" aria-busy="true">
+    <ZCard title="使用趋势" description="用量随时间的变化" aria-busy="true">
       <div class="flex h-71.25 flex-col" aria-hidden="true">
         <div class="flex h-12 shrink-0 flex-wrap content-start justify-end gap-3">
-          <BaseSkeleton v-for="item in 6" :key="item" shape="text" class="h-2 w-10" />
+          <ZSkeleton v-for="item in 6" :key="item" shape="text" class="h-2 w-10" />
         </div>
         <div class="flex min-h-0 flex-1 flex-col justify-between">
           <div v-for="line in 5" :key="line" class="flex items-center gap-3">
-            <BaseSkeleton shape="text" class="h-2 w-6 shrink-0" />
+            <ZSkeleton shape="text" class="h-2 w-6 shrink-0" />
             <span class="h-px flex-1 bg-cp-split opacity-50" />
           </div>
         </div>
         <div class="mt-3 flex justify-between gap-3 pl-9">
-          <BaseSkeleton v-for="tick in 6" :key="tick" shape="text" class="h-2 w-8" />
+          <ZSkeleton v-for="tick in 6" :key="tick" shape="text" class="h-2 w-8" />
         </div>
       </div>
-    </BaseCard>
-    <BaseCard title="额度概览" aria-busy="true">
+    </ZCard>
+    <ZCard title="额度概览" aria-busy="true">
       <div class="flex flex-1 flex-col justify-between gap-6" aria-hidden="true">
         <div class="grid flex-1 gap-6 sm:grid-cols-2">
           <div v-for="label in ['今日额度', '周额度']" :key="label" class="flex min-w-0 flex-col justify-between gap-4">
@@ -60,34 +60,34 @@ const metrics = [
               <div class="text-cp-sm text-cp-text-secondary">
                 {{ label }}
               </div>
-              <BaseSkeleton class="mt-3 h-8 w-32 max-w-full" />
+              <ZSkeleton class="mt-3 h-8 w-32 max-w-full" />
             </div>
             <div>
-              <BaseSkeleton class="h-5 w-full" />
+              <ZSkeleton class="h-5 w-full" />
               <div class="mt-2 flex justify-between gap-2">
-                <BaseSkeleton shape="text" class="h-2.5 w-16" />
-                <BaseSkeleton shape="text" class="h-2.5 w-8" />
+                <ZSkeleton shape="text" class="h-2.5 w-16" />
+                <ZSkeleton shape="text" class="h-2.5 w-8" />
               </div>
             </div>
             <div class="grid gap-2">
-              <BaseSkeleton shape="text" class="h-2.5 w-16" />
-              <BaseSkeleton shape="text" class="h-2.5 w-36 max-w-full" />
+              <ZSkeleton shape="text" class="h-2.5 w-16" />
+              <ZSkeleton shape="text" class="h-2.5 w-36 max-w-full" />
             </div>
           </div>
         </div>
         <div class="grid grid-cols-2 gap-3">
-          <BaseSkeleton v-for="limit in 2" :key="limit" class="h-10" />
+          <ZSkeleton v-for="limit in 2" :key="limit" class="h-10" />
         </div>
       </div>
-    </BaseCard>
+    </ZCard>
   </div>
 
-  <BaseCard title="请求健康时间线" description="有效请求可用性" aria-busy="true">
+  <ZCard title="请求健康时间线" description="有效请求可用性" aria-busy="true">
     <template #actions>
-      <BaseSkeleton shape="text" class="h-3.5 w-56 max-w-full" aria-hidden="true" />
+      <ZSkeleton shape="text" class="h-3.5 w-56 max-w-full" aria-hidden="true" />
     </template>
     <div class="grid grid-cols-48 items-center gap-x-0.5 gap-y-1 motion-safe:animate-cp-skeleton motion-reduce:animate-none sm:grid-cols-96" aria-hidden="true">
       <span v-for="point in 96" :key="point" class="flex h-5 items-center"><span class="h-3.5 w-full rounded-xs bg-cp-fill-secondary" /></span>
     </div>
-  </BaseCard>
+  </ZCard>
 </template>
diff --git a/frontend/src/views/key-usage/components/KeyUsageSummary.vue b/frontend/src/views/key-usage/components/KeyUsageSummary.vue
index c075eb3c8..f164b160a 100644
--- a/frontend/src/views/key-usage/components/KeyUsageSummary.vue
+++ b/frontend/src/views/key-usage/components/KeyUsageSummary.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { KeyUsageMetrics } from '@/api/modules/key-usage'
-import { BaseCard, BaseMotionIcon } from '@codex-proxy/ui'
+import { ZCard, ZMotionIcon } from '@codex-proxy/ui'
 import { Gauge, Zap } from '@lucide/vue'
 import { computed } from 'vue'
 import AnimatedMetricValue from '@/components/AnimatedMetricValue.vue'
@@ -22,11 +22,11 @@ const metrics = computed(() => [
 
 <template>
   <section class="grid min-w-0 gap-4 xl:grid-cols-[minmax(340px,0.95fr)_minmax(0,3fr)]" aria-label="用量汇总">
-    <BaseCard as="article" padding="compact" class="flex min-h-28 min-w-0 flex-col justify-between gap-4">
+    <ZCard as="article" padding="compact" class="flex min-h-28 min-w-0 flex-col justify-between gap-4">
       <div class="flex min-w-0 flex-1 items-center gap-3">
-        <BaseMotionIcon class="inline-flex size-9 shrink-0 items-center relative -top-0.5 justify-center rounded-cp-lg bg-cp-info-container text-cp-info-on-container" aria-hidden="true">
+        <ZMotionIcon class="inline-flex size-9 shrink-0 items-center relative -top-0.5 justify-center rounded-cp-lg bg-cp-info-container text-cp-info-on-container" aria-hidden="true">
           <Zap :size="19" />
-        </BaseMotionIcon>
+        </ZMotionIcon>
         <span class="sr-only">消耗 Tokens</span>
         <div class="flex min-w-0 flex-wrap items-baseline gap-x-2 gap-y-1">
           <strong class="min-w-0 font-mono text-[32px] leading-[1.05] font-heavy wrap-anywhere tabular-nums text-cp-text" :title="formatCompactNumber(summary.totalTokens)">
@@ -53,8 +53,8 @@ const metrics = computed(() => [
           </dd>
         </div>
       </dl>
-    </BaseCard>
-    <BaseCard as="article" padding="compact" class="flex min-h-28 min-w-0 items-center" aria-label="用量明细">
+    </ZCard>
+    <ZCard as="article" padding="compact" class="flex min-h-28 min-w-0 items-center" aria-label="用量明细">
       <dl class="m-0 grid w-full min-w-0 grid-cols-2 gap-x-6 gap-y-5 sm:grid-cols-3 2xl:grid-cols-6">
         <div v-for="item in metrics" :key="item.label" class="min-w-0">
           <dt class="flex min-w-0 items-center gap-2 text-cp-lg leading-[1.15] font-emphasis text-cp-text-secondary">
@@ -66,6 +66,6 @@ const metrics = computed(() => [
           </dd>
         </div>
       </dl>
-    </BaseCard>
+    </ZCard>
   </section>
 </template>
diff --git a/frontend/src/views/key-usage/components/KeyUsageTrend.vue b/frontend/src/views/key-usage/components/KeyUsageTrend.vue
index bd4825ad8..af29b66f1 100644
--- a/frontend/src/views/key-usage/components/KeyUsageTrend.vue
+++ b/frontend/src/views/key-usage/components/KeyUsageTrend.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { EChartsOption, LineSeriesOption } from 'echarts'
 import type { KeyUsageTrendPoint } from '@/api/modules/key-usage'
-import { BaseCard, BaseEmpty } from '@codex-proxy/ui'
+import { ZCard, ZEmpty } from '@codex-proxy/ui'
 import { computed } from 'vue'
 import BaseChart from '@/components/charts/BaseChart.vue'
 import { chartTooltipStyle } from '@/components/charts/tooltip'
@@ -66,13 +66,13 @@ const option = computed<EChartsOption>(() => {
 </script>
 
 <template>
-  <BaseCard title="使用趋势" description="用量随时间的变化">
+  <ZCard title="使用趋势" description="用量随时间的变化">
     <BaseChart v-if="points.some(point => point.requests > 0)" :option="option" :height="285" />
-    <BaseEmpty
+    <ZEmpty
       v-else
       title="所选时间内暂无请求"
       surface="none"
       class="h-71 place-content-center"
     />
-  </BaseCard>
+  </ZCard>
 </template>
diff --git a/frontend/src/views/key-usage/index.vue b/frontend/src/views/key-usage/index.vue
index dbf3205d6..d72d1dec9 100644
--- a/frontend/src/views/key-usage/index.vue
+++ b/frontend/src/views/key-usage/index.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { KeyUsageVersion } from '@/api/modules/key-usage'
-import { BaseInput, BaseScrollbar } from '@codex-proxy/ui'
+import { ZInput, ZScrollbar } from '@codex-proxy/ui'
 import { Search } from '@lucide/vue'
 import { shallowRef } from 'vue'
 import { getKeyUsageVersion } from '@/api/modules/key-usage'
@@ -43,17 +43,17 @@ async function openAbout() {
 
 <template>
   <main class="h-dvh overflow-hidden bg-cp-bg-layout text-cp-text">
-    <BaseScrollbar>
+    <ZScrollbar>
       <div class="mx-auto flex min-h-full w-full max-w-480 flex-col gap-5 p-4 min-[961px]:p-6">
         <div class="flex flex-col gap-2">
           <KeyUsageHeader v-model:period="period" v-model:refresh-interval="refreshInterval" :name="overview?.key.name" :prefix="overview?.key.prefix" :refreshing="refreshing || overviewLoading" :configuring="configuring" @refresh="refresh" @configure="openConfig" @open-about="openAbout" />
           <div class="flex flex-wrap items-center justify-between gap-3">
             <span v-if="overview" class="text-cp-sm text-cp-text-tertiary">更新于 {{ overview.asOfDisplay }}</span>
-            <BaseInput v-model="model" class="ml-auto w-60 max-w-full" placeholder="输入完整模型名称" aria-label="筛选统计和日志的模型" :maxlength="128">
+            <ZInput v-model="model" class="ml-auto w-60 max-w-full" placeholder="输入完整模型名称" aria-label="筛选统计和日志的模型" :maxlength="128">
               <template #prefix>
                 <Search class="size-4" />
               </template>
-            </BaseInput>
+            </ZInput>
           </div>
         </div>
         <p v-if="overviewError" role="alert" class="m-0 rounded-cp-lg bg-cp-error-container px-4 py-3 text-cp-sm text-cp-error-text">
@@ -70,7 +70,7 @@ async function openAbout() {
         <KeyUsageSkeleton v-else-if="overviewLoading" />
         <KeyUsageRecords v-model:kind="kind" :rows="items" :pagination="{ currentPage, pageSize, total }" :loading="recordsLoading" :error="recordsError" :stale="recordsStale" @page-change="changePage" @page-size-change="changePageSize" />
       </div>
-    </BaseScrollbar>
+    </ZScrollbar>
     <ApiKeyConfigModal v-model="showConfig" title="密钥配置" :api-key="configKey" :api-base-url="apiBaseUrl" @copy="copyConfig" @after-leave="configKey = null" />
     <AppAboutModal v-model="aboutOpen" :version="version" />
   </main>
diff --git a/frontend/src/views/keys/components/ApiKeyActions.vue b/frontend/src/views/keys/components/ApiKeyActions.vue
index 675291d15..6eee8aaec 100644
--- a/frontend/src/views/keys/components/ApiKeyActions.vue
+++ b/frontend/src/views/keys/components/ApiKeyActions.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { ApiKey } from '@/api'
 
-import { BaseIconButton, BaseMenuItem, BasePopover } from '@codex-proxy/ui'
+import { ZIconButton, ZMenuItem, ZPopover } from '@codex-proxy/ui'
 
 import { MoreHorizontal, Pencil, Power, RotateCcw, Terminal, Trash2, Upload } from '@lucide/vue'
 
@@ -24,59 +24,57 @@ const emit = defineEmits<{
 
 <template>
   <div class="flex items-center justify-start gap-0.5">
-    <BaseIconButton
-      variant="ghost"
-      size="sm"
-      label="编辑密钥"
+    <ZIconButton
+      size="small"
+      aria-label="编辑密钥"
       @click.stop="emit('edit', apiKey)"
     >
       <Pencil class="size-3.5 text-cp-link" />
-    </BaseIconButton>
-    <BaseIconButton
-      variant="ghost"
-      size="sm"
-      label="使用密钥"
+    </ZIconButton>
+    <ZIconButton
+      size="small"
+      aria-label="使用密钥"
       :loading="revealing"
       :disabled="revealing"
       @click.stop="emit('use', apiKey)"
     >
       <Terminal class="size-3.5 text-cp-primary-text" />
-    </BaseIconButton>
+    </ZIconButton>
 
-    <BasePopover placement="bottom-end">
-      <template #trigger="{ open }">
-        <BaseIconButton variant="ghost" size="sm" label="更多操作" :pressed="open">
+    <ZPopover placement="bottom-end">
+      <template #reference="{ open }">
+        <ZIconButton size="small" aria-label="更多操作" :pressed="open">
           <MoreHorizontal class="size-4" />
-        </BaseIconButton>
+        </ZIconButton>
       </template>
       <template #default="{ close }">
         <div class="w-44 p-1.5">
-          <BaseMenuItem @click.stop="(close(), emit('resetBudget', apiKey))">
+          <ZMenuItem @click.stop="(close(), emit('resetBudget', apiKey))">
             <template #icon>
               <RotateCcw class="size-3.5 text-cp-text-quaternary" />
             </template>
             重置已用额度
-          </BaseMenuItem>
-          <BaseMenuItem :disabled="revealing" @click.stop="(close(), emit('importCcs', apiKey))">
+          </ZMenuItem>
+          <ZMenuItem :disabled="revealing" @click.stop="(close(), emit('importCcs', apiKey))">
             <template #icon>
               <Upload class="size-3.5 text-cp-text-quaternary" />
             </template>
             导入 CCSwitch
-          </BaseMenuItem>
-          <BaseMenuItem :loading="updatingStatus" @click.stop="(close(), emit('toggle', apiKey))">
+          </ZMenuItem>
+          <ZMenuItem :loading="updatingStatus" @click.stop="(close(), emit('toggle', apiKey))">
             <template #icon>
               <Power class="size-3.5" :class="apiKey.enabled ? 'text-cp-warning' : 'text-cp-success'" />
             </template>
             {{ apiKey.enabled ? '禁用密钥' : '启用密钥' }}
-          </BaseMenuItem>
-          <BaseMenuItem tone="destructive" :disabled="deleting" @click.stop="(close(), emit('delete', apiKey))">
+          </ZMenuItem>
+          <ZMenuItem type="danger" :disabled="deleting" @click.stop="(close(), emit('delete', apiKey))">
             <template #icon>
               <Trash2 class="size-3.5" />
             </template>
             删除密钥
-          </BaseMenuItem>
+          </ZMenuItem>
         </div>
       </template>
-    </BasePopover>
+    </ZPopover>
   </div>
 </template>
diff --git a/frontend/src/views/keys/components/ApiKeyBudgetCell.vue b/frontend/src/views/keys/components/ApiKeyBudgetCell.vue
index a620f69d7..5d7cbd89d 100644
--- a/frontend/src/views/keys/components/ApiKeyBudgetCell.vue
+++ b/frontend/src/views/keys/components/ApiKeyBudgetCell.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { ApiKey } from '@/api'
-import { BasePopover } from '@codex-proxy/ui'
+import { ZPopover } from '@codex-proxy/ui'
 import { computed } from 'vue'
 
 const props = defineProps<{ apiKey: ApiKey }>()
@@ -15,8 +15,8 @@ function amount(value: string) {
 </script>
 
 <template>
-  <BasePopover class="w-full min-w-0" trigger="hover-click" placement="right" :hover-delay="240">
-    <template #trigger="{ open }">
+  <ZPopover class="w-full min-w-0" trigger="hover-click" placement="right" :hover-delay="240">
+    <template #reference="{ open }">
       <button
         type="button"
         class="grid w-full min-w-0 cursor-pointer gap-1 rounded-sm border-0 bg-transparent p-0 text-left text-xs tabular-nums outline-none focus-visible:ring-2 focus-visible:ring-cp-control-outline"
@@ -49,5 +49,5 @@ function amount(value: string) {
         </div>
       </div>
     </section>
-  </BasePopover>
+  </ZPopover>
 </template>
diff --git a/frontend/src/views/keys/components/ApiKeyBudgetResetModal.vue b/frontend/src/views/keys/components/ApiKeyBudgetResetModal.vue
index eddc96b2c..5a12ee597 100644
--- a/frontend/src/views/keys/components/ApiKeyBudgetResetModal.vue
+++ b/frontend/src/views/keys/components/ApiKeyBudgetResetModal.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { ApiKey } from '@/api'
-import { BaseButton, BaseModal, BaseSegmented, toast } from '@codex-proxy/ui'
+import { ZButton, ZDialog, ZNotification, ZSegmented } from '@codex-proxy/ui'
 import { ArrowRight } from '@lucide/vue'
 import { computed, shallowRef, watch } from 'vue'
 import { resetApiKeyBudget } from '@/api'
@@ -36,24 +36,24 @@ async function resetBudget() {
   await run(async () => {
     await resetApiKeyBudget({ id: key.id, period: selectedPeriod })
     open.value = false
-    toast.success('已重置密钥额度')
+    ZNotification.success({ message: '已重置密钥额度' })
     emit('reset')
   })
 }
 </script>
 
 <template>
-  <BaseModal
+  <ZDialog
     v-model="open"
     title="重置已用额度"
     description="清零所选周期的已用金额，下次使用时重新确定重置日期"
-    size="sm"
-    :dismissible="!loading"
+    width="28rem"
+    :show-close="!loading" :close-on-click-modal="!loading" :close-on-press-escape="!loading"
   >
     <div class="grid gap-5">
       <div class="grid min-w-0 gap-1.5">
         <span class="text-cp-xs text-cp-text-quaternary">目标密钥</span>
-        <p class="m-0 break-words text-cp text-cp-text">
+        <p class="m-0 wrap-break-word text-cp text-cp-text">
           {{ apiKey?.name }}
         </p>
       </div>
@@ -62,7 +62,7 @@ async function resetBudget() {
         <legend class="mb-2.5 p-0 text-cp-sm text-cp-text-secondary">
           重置范围
         </legend>
-        <BaseSegmented v-model="period" class="w-full" label="重置范围" :options="periods" :disabled="loading" />
+        <ZSegmented v-model="period" class="w-full" aria-label="重置范围" :options="periods" :disabled="loading" />
       </fieldset>
 
       <div v-if="apiKey" class="rounded-cp bg-cp-fill-quaternary p-3.5" aria-live="polite" aria-atomic="true">
@@ -87,12 +87,12 @@ async function resetBudget() {
     </div>
 
     <template #footer>
-      <BaseButton variant="secondary" :disabled="loading" @click="open = false">
+      <ZButton :disabled="loading" @click="open = false">
         取消
-      </BaseButton>
-      <BaseButton variant="primary" :loading="loading" :disabled="!apiKey" @click="resetBudget">
+      </ZButton>
+      <ZButton type="primary" :loading="loading" :disabled="!apiKey" @click="resetBudget">
         确认重置
-      </BaseButton>
+      </ZButton>
     </template>
-  </BaseModal>
+  </ZDialog>
 </template>
diff --git a/frontend/src/views/keys/components/ApiKeyCreatedModal.vue b/frontend/src/views/keys/components/ApiKeyCreatedModal.vue
index 75f74dddd..4ee498400 100644
--- a/frontend/src/views/keys/components/ApiKeyCreatedModal.vue
+++ b/frontend/src/views/keys/components/ApiKeyCreatedModal.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { BaseButton, BaseIconButton, BaseModal } from '@codex-proxy/ui'
+import { ZButton, ZDialog, ZIconButton } from '@codex-proxy/ui'
 import { Copy, Upload } from '@lucide/vue'
 
 defineProps<{ createdKey: string }>()
@@ -12,13 +12,13 @@ const open = defineModel<boolean>({ default: false })
 </script>
 
 <template>
-  <BaseModal
+  <ZDialog
     v-model="open"
     title="API Key 已创建"
     description="复制密钥，或直接导入 CCSwitch"
-    tone="success"
-    size="md"
-    @after-leave="emit('afterLeave')"
+    type="success"
+    width="36rem"
+    @closed="emit('afterLeave')"
   >
     <div class="flex flex-col gap-4">
       <div class="rounded-cp border border-cp-warning-border bg-cp-warning-container px-4 py-3">
@@ -34,29 +34,29 @@ const open = defineModel<boolean>({ default: false })
           <code class="flex-1 rounded-cp bg-cp-fill-quaternary px-3 py-2.5 font-mono text-cp break-all text-cp-text">
             {{ createdKey }}
           </code>
-          <BaseIconButton size="md" label="复制" @click="emit('copy', createdKey)">
+          <ZIconButton size="default" aria-label="复制" @click="emit('copy', createdKey)">
             <Copy class="size-4" />
-          </BaseIconButton>
+          </ZIconButton>
         </div>
       </div>
     </div>
 
     <template #footer>
-      <BaseButton variant="secondary" @click="emit('copy', createdKey)">
+      <ZButton @click="emit('copy', createdKey)">
         <template #icon>
           <Copy class="size-4" />
         </template>
         复制密钥
-      </BaseButton>
-      <BaseButton variant="secondary" @click="emit('importCcs')">
+      </ZButton>
+      <ZButton @click="emit('importCcs')">
         <template #icon>
           <Upload class="size-4" />
         </template>
         导入 CCSwitch
-      </BaseButton>
-      <BaseButton variant="primary" @click="open = false">
+      </ZButton>
+      <ZButton type="primary" @click="open = false">
         我已保存
-      </BaseButton>
+      </ZButton>
     </template>
-  </BaseModal>
+  </ZDialog>
 </template>
diff --git a/frontend/src/views/keys/components/ApiKeyFilters.vue b/frontend/src/views/keys/components/ApiKeyFilters.vue
index 398b2eeef..b51dcd2b6 100644
--- a/frontend/src/views/keys/components/ApiKeyFilters.vue
+++ b/frontend/src/views/keys/components/ApiKeyFilters.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { BaseButton, BaseInput } from '@codex-proxy/ui'
+import { ZButton, ZInput } from '@codex-proxy/ui'
 
 import { Plus, Search, Trash2 } from '@lucide/vue'
 
@@ -23,17 +23,17 @@ const search = defineModel<string>('search', { required: true })
     aria-label="API Key 筛选与操作"
   >
     <div class="min-w-0 flex-1 md:w-96 md:flex-none">
-      <BaseInput v-model="search" placeholder="搜索名称或标签" aria-label="搜索 API Key 名称或标签" class="w-full">
+      <ZInput v-model="search" placeholder="搜索名称或标签" aria-label="搜索 API Key 名称或标签" class="w-full">
         <template #prefix>
           <Search class="size-4.5 text-cp-text-tertiary" />
         </template>
-      </BaseInput>
+      </ZInput>
     </div>
 
     <div class="flex shrink-0 items-center justify-end gap-2 md:ml-auto">
-      <BaseButton
+      <ZButton
         v-if="selectedCount > 0"
-        variant="destructive"
+        type="danger" variant="plain"
         :disabled="batchDeleting"
         @click="emit('deleteSelected')"
       >
@@ -41,13 +41,13 @@ const search = defineModel<string>('search', { required: true })
           <Trash2 class="size-4" />
         </template>
         删除选中 ({{ selectedCount }})
-      </BaseButton>
-      <BaseButton variant="primary" @click="emit('create')">
+      </ZButton>
+      <ZButton type="primary" @click="emit('create')">
         <template #icon>
           <Plus class="size-4" />
         </template>
         创建 API Key
-      </BaseButton>
+      </ZButton>
     </div>
   </div>
 </template>
diff --git a/frontend/src/views/keys/components/ApiKeyFormModal.vue b/frontend/src/views/keys/components/ApiKeyFormModal.vue
index 2b45b5de1..72b32876d 100644
--- a/frontend/src/views/keys/components/ApiKeyFormModal.vue
+++ b/frontend/src/views/keys/components/ApiKeyFormModal.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { ApiKeyFormValue } from '../composables/useApiKeyEditor'
 import type { AccountGroupRef } from '@/api'
-import { BaseButton, BaseForm, BaseFormItem, BaseInput, BaseModal } from '@codex-proxy/ui'
+import { ZButton, ZDialog, ZForm, ZFormItem, ZInput } from '@codex-proxy/ui'
 
 import { DollarSign, KeyRound } from '@lucide/vue'
 import { computed } from 'vue'
@@ -28,44 +28,44 @@ function updateForm<Key extends keyof ApiKeyFormValue>(key: Key, value: ApiKeyFo
 </script>
 
 <template>
-  <BaseModal
+  <ZDialog
     v-model="open"
     :title="title"
     description="配置密钥信息、分组与使用限制"
-    tone="info"
-    size="lg"
-    :dismissible="!saving"
-    @after-leave="emit('afterLeave')"
+    type="info"
+    width="48rem"
+    :show-close="!saving" :close-on-click-modal="!saving" :close-on-press-escape="!saving"
+    @closed="emit('afterLeave')"
   >
     <template #icon>
       <KeyRound class="text-cp-text" :size="20" aria-hidden="true" />
     </template>
 
-    <BaseForm class="grid gap-6">
-      <BaseFormItem label="名称" required>
-        <BaseInput
+    <ZForm class="grid gap-6">
+      <ZFormItem label="名称" required>
+        <ZInput
           :model-value="form.name" aria-label="名称"
           placeholder="例如：生产环境"
           :disabled="saving"
           @update:model-value="updateForm('name', $event)"
         />
-      </BaseFormItem>
+      </ZFormItem>
 
       <div class="grid gap-6" :class="{ 'sm:grid-cols-2': !editing }">
-        <BaseFormItem label="标签（可选）">
-          <BaseInput
+        <ZFormItem label="标签（可选）">
+          <ZInput
             :model-value="form.label" aria-label="标签（可选）"
             placeholder="例如：后端服务"
             :disabled="saving"
             @update:model-value="updateForm('label', $event)"
           />
-        </BaseFormItem>
+        </ZFormItem>
 
-        <BaseFormItem
+        <ZFormItem
           v-if="!editing"
           label="自定义 Key（可选）"
         >
-          <BaseInput
+          <ZInput
             :model-value="form.customKey" type="password"
             autocomplete="new-password"
             :spellcheck="false"
@@ -74,30 +74,30 @@ function updateForm<Key extends keyof ApiKeyFormValue>(key: Key, value: ApiKeyFo
             :disabled="saving"
             @update:model-value="updateForm('customKey', $event)"
           />
-        </BaseFormItem>
+        </ZFormItem>
       </div>
 
-      <BaseFormItem label="分组">
+      <ZFormItem label="分组">
         <AccountGroupCheckboxGrid
           :model-value="form.groupIds" :groups="groups"
           :loading="groupLoading"
           :disabled="saving"
           @update:model-value="updateForm('groupIds', $event)"
         />
-      </BaseFormItem>
+      </ZFormItem>
 
-      <BaseFormItem label="上游身份">
+      <ZFormItem label="上游身份">
         <ProviderRequestProfilesEditor
           :model-value="form.providerRequestProfileOverrides" allow-inherit
           :active="open"
           :disabled="saving"
           @update:model-value="updateForm('providerRequestProfileOverrides', $event)"
         />
-      </BaseFormItem>
+      </ZFormItem>
 
       <div class="grid gap-6 sm:grid-cols-2">
-        <BaseFormItem label="日限额">
-          <BaseInput
+        <ZFormItem label="日限额">
+          <ZInput
             :model-value="form.dailyLimitUsd" type="number"
             min="0"
             step="any"
@@ -109,10 +109,10 @@ function updateForm<Key extends keyof ApiKeyFormValue>(key: Key, value: ApiKeyFo
             <template #prefix>
               <DollarSign class="size-4" aria-hidden="true" />
             </template>
-          </BaseInput>
-        </BaseFormItem>
-        <BaseFormItem label="周限额">
-          <BaseInput
+          </ZInput>
+        </ZFormItem>
+        <ZFormItem label="周限额">
+          <ZInput
             :model-value="form.weeklyLimitUsd" type="number"
             min="0"
             step="any"
@@ -124,13 +124,13 @@ function updateForm<Key extends keyof ApiKeyFormValue>(key: Key, value: ApiKeyFo
             <template #prefix>
               <DollarSign class="size-4" aria-hidden="true" />
             </template>
-          </BaseInput>
-        </BaseFormItem>
+          </ZInput>
+        </ZFormItem>
       </div>
 
       <div class="grid gap-6 sm:grid-cols-2">
-        <BaseFormItem label="最大并发">
-          <BaseInput
+        <ZFormItem label="最大并发">
+          <ZInput
             :model-value="form.maxConcurrency" type="number"
             aria-label="最大并发"
             min="0"
@@ -139,9 +139,9 @@ function updateForm<Key extends keyof ApiKeyFormValue>(key: Key, value: ApiKeyFo
             :disabled="saving"
             @update:model-value="updateForm('maxConcurrency', $event)"
           />
-        </BaseFormItem>
-        <BaseFormItem label="每分钟请求数（RPM）">
-          <BaseInput
+        </ZFormItem>
+        <ZFormItem label="每分钟请求数（RPM）">
+          <ZInput
             :model-value="form.requestsPerMinute" type="number"
             aria-label="每分钟请求数（RPM）"
             min="0"
@@ -150,22 +150,22 @@ function updateForm<Key extends keyof ApiKeyFormValue>(key: Key, value: ApiKeyFo
             :disabled="saving"
             @update:model-value="updateForm('requestsPerMinute', $event)"
           />
-        </BaseFormItem>
+        </ZFormItem>
       </div>
-    </BaseForm>
+    </ZForm>
 
     <template #footer>
-      <BaseButton variant="secondary" :disabled="saving" @click="open = false">
+      <ZButton :disabled="saving" @click="open = false">
         取消
-      </BaseButton>
-      <BaseButton
-        variant="primary"
+      </ZButton>
+      <ZButton
+        type="primary"
         :loading="saving"
         :disabled="!form.name.trim()"
         @click="emit('save')"
       >
         {{ editing ? '保存更改' : '创建' }}
-      </BaseButton>
+      </ZButton>
     </template>
-  </BaseModal>
+  </ZDialog>
 </template>
diff --git a/frontend/src/views/keys/components/ApiKeyPrefixCell.vue b/frontend/src/views/keys/components/ApiKeyPrefixCell.vue
index aae7a7eb2..fc6f29583 100644
--- a/frontend/src/views/keys/components/ApiKeyPrefixCell.vue
+++ b/frontend/src/views/keys/components/ApiKeyPrefixCell.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { BaseIconButton } from '@codex-proxy/ui'
+import { ZIconButton } from '@codex-proxy/ui'
 
 import { Copy } from '@lucide/vue'
 
@@ -18,15 +18,14 @@ const emit = defineEmits<{
     <code class="block min-w-0 overflow-hidden whitespace-nowrap font-mono text-cp-sm font-emphasis text-cp-text">
       {{ prefix }}••••••••••••••••
     </code>
-    <BaseIconButton
-      variant="ghost"
-      size="sm"
-      label="复制完整密钥"
+    <ZIconButton
+      size="small"
+      aria-label="复制完整密钥"
       :loading="revealing"
       :disabled="revealing"
       @click="emit('copy')"
     >
       <Copy class="size-3.5" />
-    </BaseIconButton>
+    </ZIconButton>
   </div>
 </template>
diff --git a/frontend/src/views/keys/composables/useApiKeyEditor.ts b/frontend/src/views/keys/composables/useApiKeyEditor.ts
index 948ddd8c4..46c19f9f6 100644
--- a/frontend/src/views/keys/composables/useApiKeyEditor.ts
+++ b/frontend/src/views/keys/composables/useApiKeyEditor.ts
@@ -1,6 +1,6 @@
 import type { ApiKey } from '@/api'
 import type { ProviderRequestProfiles, ProviderRequestProfileUpdates } from '@/api/modules/settings/profiles'
-import { toast } from '@codex-proxy/ui'
+import { ZNotification } from '@codex-proxy/ui'
 import { cloneDeep } from 'es-toolkit'
 import { ref, shallowRef } from 'vue'
 import { createApiKey, updateApiKey } from '@/api'
@@ -105,11 +105,11 @@ export function useApiKeyEditor(options: {
         showFormModal.value = false
         await options.reload()
         if (current) {
-          toast.success('API Key 已更新')
+          ZNotification.success({ message: 'API Key 已更新' })
         }
         else if (created) {
           options.onCreated(created.key, created.name)
-          toast.success('API Key 创建成功')
+          ZNotification.success({ message: 'API Key 创建成功' })
         }
       },
       { onError: () => void options.reload() },
@@ -119,16 +119,16 @@ export function useApiKeyEditor(options: {
   function validateForm() {
     for (const [label, value] of [['日限额', form.value.dailyLimitUsd], ['周限额', form.value.weeklyLimitUsd]]) {
       if (value.trim() && !/^\d{1,10}(?:\.\d{1,10})?$/.test(value.trim())) {
-        toast.warning(`${label}必须是非负金额，最多 10 位小数`)
+        ZNotification.warning({ message: `${label}必须是非负金额，最多 10 位小数` })
         return false
       }
     }
     if (!form.value.name.trim()) {
-      toast.warning('请输入 API Key 名称')
+      ZNotification.warning({ message: '请输入 API Key 名称' })
       return false
     }
     if (!editingKey.value && form.value.customKey && !/^[\x21-\x7E]+$/.test(form.value.customKey)) {
-      toast.warning('自定义 Key 只能包含 HTTP 可传输的可见字符，不能包含空格或换行')
+      ZNotification.warning({ message: '自定义 Key 只能包含 HTTP 可传输的可见字符，不能包含空格或换行' })
       return false
     }
     for (const [label, value] of [
@@ -137,7 +137,7 @@ export function useApiKeyEditor(options: {
     ] as const) {
       const parsed = Number(value)
       if (!Number.isSafeInteger(parsed) || parsed < 0) {
-        toast.warning(`${label}必须是非负整数`)
+        ZNotification.warning({ message: `${label}必须是非负整数` })
         return false
       }
     }
diff --git a/frontend/src/views/keys/composables/useApiKeyMutations.ts b/frontend/src/views/keys/composables/useApiKeyMutations.ts
index c101d8a1c..bee709ea1 100644
--- a/frontend/src/views/keys/composables/useApiKeyMutations.ts
+++ b/frontend/src/views/keys/composables/useApiKeyMutations.ts
@@ -1,6 +1,6 @@
 import type { Ref } from 'vue'
 import type { ApiKey } from '@/api'
-import { toast } from '@codex-proxy/ui'
+import { ZNotification } from '@codex-proxy/ui'
 import { shallowRef, watch } from 'vue'
 import { deleteApiKey, disableApiKey, enableApiKey } from '@/api'
 import { useAsyncAction } from '@/composables/useAsyncAction'
@@ -46,7 +46,7 @@ export function useApiKeyMutations(options: {
         options.selectedIds.value = remaining
         showSingleDeleteModal.value = false
         await options.reload()
-        toast.success('删除成功')
+        ZNotification.success({ message: '删除成功' })
       },
       { onError: () => void options.reload() },
     )
@@ -67,7 +67,7 @@ export function useApiKeyMutations(options: {
         }
         showDeleteModal.value = false
         await options.reload()
-        toast.success(`已删除 ${deleteCount} 个 API Key`)
+        ZNotification.success({ message: `已删除 ${deleteCount} 个 API Key` })
       },
       { onError: () => void options.reload() },
     )
@@ -79,7 +79,7 @@ export function useApiKeyMutations(options: {
         const mutation = key.enabled ? disableApiKey : enableApiKey
         await mutation({ id: key.id })
         await options.reload()
-        toast.success(key.enabled ? '已禁用' : '已启用')
+        ZNotification.success({ message: key.enabled ? '已禁用' : '已启用' })
       }
       catch {
         void options.reload()
diff --git a/frontend/src/views/keys/composables/useApiKeyUse.ts b/frontend/src/views/keys/composables/useApiKeyUse.ts
index 509dd7b59..33e15bd36 100644
--- a/frontend/src/views/keys/composables/useApiKeyUse.ts
+++ b/frontend/src/views/keys/composables/useApiKeyUse.ts
@@ -1,5 +1,5 @@
 import type { ApiKey } from '@/api'
-import { toast } from '@codex-proxy/ui'
+import { ZNotification } from '@codex-proxy/ui'
 import { shallowRef } from 'vue'
 import { revealApiKey } from '@/api'
 import { useCopyText } from '@/composables/useCopyText'
@@ -64,7 +64,7 @@ export function useApiKeyUse() {
       if (!result)
         return undefined
       if (!result.plaintextKey) {
-        toast.error('完整 API Key 不可用')
+        ZNotification.error({ message: '完整 API Key 不可用' })
         return undefined
       }
       return result.plaintextKey
diff --git a/frontend/src/views/keys/composables/useApiKeysQuery.ts b/frontend/src/views/keys/composables/useApiKeysQuery.ts
index 954aa2aee..25f503cae 100644
--- a/frontend/src/views/keys/composables/useApiKeysQuery.ts
+++ b/frontend/src/views/keys/composables/useApiKeysQuery.ts
@@ -1,4 +1,4 @@
-import type { BaseTableSort } from '@codex-proxy/ui'
+import type { TableSort } from '@codex-proxy/ui'
 import type { ApiKey } from '@/api'
 
 import { computed, onMounted, shallowRef, watch } from 'vue'
@@ -7,7 +7,7 @@ import { useRequestState } from '@/composables/useRequestState'
 
 export function useApiKeysQuery() {
   const searchQuery = shallowRef('')
-  const sort = shallowRef<BaseTableSort>()
+  const sort = shallowRef<TableSort>()
   const page = shallowRef(1)
   const pageSize = shallowRef(20)
   const total = shallowRef(0)
@@ -109,7 +109,7 @@ export function useApiKeysQuery() {
     void reloadFromStart()
   }
 
-  function handleSortChange(nextSort: BaseTableSort | undefined) {
+  function handleSortChange(nextSort: TableSort | undefined) {
     sort.value = nextSort
     void reloadFromStart()
   }
diff --git a/frontend/src/views/keys/index.vue b/frontend/src/views/keys/index.vue
index 1d3ae0b99..1346e71e5 100644
--- a/frontend/src/views/keys/index.vue
+++ b/frontend/src/views/keys/index.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { ApiKey } from '@/api'
-import { BaseCard, BaseCheckbox, BaseConfirmModal, BasePageHeader, BaseTable, BaseTablePagination } from '@codex-proxy/ui'
+import { ZCard, ZCheckbox, ZConfirmDialog, ZPageHeader, ZPagination, ZTable } from '@codex-proxy/ui'
 
 import { ref, shallowRef, watch } from 'vue'
 import ApiKeyConfigModal from '@/components/ApiKeyConfigModal.vue'
@@ -105,13 +105,13 @@ watch(
 
 <template>
   <div class="flex h-full min-h-0 w-full flex-col overflow-hidden">
-    <BasePageHeader
+    <ZPageHeader
       class="h-17"
       title="API 密钥"
       description="创建和管理 API 密钥，并设置每个密钥可以使用的账号"
     />
 
-    <BaseCard
+    <ZCard
       class="mt-5 flex h-[calc(100dvh-136px)] min-h-125 flex-col"
     >
       <template #header>
@@ -126,10 +126,10 @@ watch(
 
       <template #body>
         <div class="flex h-full min-h-0 flex-col">
-          <BaseTable
+          <ZTable
             class="min-h-0 flex-1"
             :columns="apiKeyColumns"
-            :rows="apiKeys"
+            :data="apiKeys"
             :loading="loading"
             :selected-row-keys="selectedRowKeys"
             :sort="sort"
@@ -137,17 +137,17 @@ watch(
             @sort-change="handleSortChange"
           >
             <template #header-selection>
-              <BaseCheckbox
+              <ZCheckbox
                 :model-value="allSelected"
                 :indeterminate="indeterminate"
-                label="选择当前页密钥"
+                aria-label="选择当前页密钥"
                 @update:model-value="toggleAll"
               />
             </template>
             <template #selection="{ row }">
-              <BaseCheckbox
+              <ZCheckbox
                 :model-value="selectedIds.has(row.id)"
-                label="选择密钥"
+                aria-label="选择密钥"
                 @update:model-value="toggleSelection(row.id)"
               />
             </template>
@@ -203,16 +203,16 @@ watch(
                 @use="openUseKeyModal"
               />
             </template>
-          </BaseTable>
-          <BaseTablePagination
-            :pagination="apiKeyPagination"
-            :loading="loading"
-            @page-change="handlePageChange"
-            @page-size-change="handlePageSizeChange"
+          </ZTable>
+          <ZPagination
+            v-bind="apiKeyPagination"
+            :disabled="loading"
+            @current-change="handlePageChange"
+            @size-change="handlePageSizeChange"
           />
         </div>
       </template>
-    </BaseCard>
+    </ZCard>
 
     <ApiKeyFormModal
       v-model="showFormModal"
@@ -247,7 +247,7 @@ watch(
       @after-leave="selectedUseKey = null"
     />
 
-    <BaseConfirmModal
+    <ZConfirmDialog
       v-model="showAllAccountsConfirm"
       title="授予全部账号权限"
       description="保存后，该密钥可以使用所有账号"
@@ -258,9 +258,9 @@ watch(
       <p class="m-0">
         该密钥可以使用所有账号，包括以后新增和未分组的账号
       </p>
-    </BaseConfirmModal>
+    </ZConfirmDialog>
 
-    <BaseConfirmModal
+    <ZConfirmDialog
       v-model="showDeleteModal"
       title="确认删除"
       description="删除后这些 API Key 将立即失效，此操作不可撤销"
@@ -272,9 +272,9 @@ watch(
       <p class="m-0">
         确定删除选中的 {{ deleteCount }} 个 API Key 吗？
       </p>
-    </BaseConfirmModal>
+    </ZConfirmDialog>
 
-    <BaseConfirmModal
+    <ZConfirmDialog
       v-model="showSingleDeleteModal"
       title="删除 API Key"
       description="删除后该 API Key 将立即失效，此操作不可撤销"
@@ -286,6 +286,6 @@ watch(
       <p class="m-0">
         确定删除 {{ pendingDeleteKey?.name || pendingDeleteKey?.prefix || '该 API Key' }} 吗？
       </p>
-    </BaseConfirmModal>
+    </ZConfirmDialog>
   </div>
 </template>
diff --git a/frontend/src/views/login/components/LoginPanel.vue b/frontend/src/views/login/components/LoginPanel.vue
index 165998828..365e4d290 100644
--- a/frontend/src/views/login/components/LoginPanel.vue
+++ b/frontend/src/views/login/components/LoginPanel.vue
@@ -1,12 +1,11 @@
 <script setup lang="ts">
-import { BaseButton, BaseCard, BaseIconButton, BaseInput, BaseMotionIcon, BaseSegmented } from '@codex-proxy/ui'
+import { ZButton, ZCard, ZInput, ZMotionIcon, ZSegmented } from '@codex-proxy/ui'
 
-import { Eye, EyeOff, KeyRound, Mail, ShieldCheck } from '@lucide/vue'
-import { computed, shallowRef, watch } from 'vue'
+import { KeyRound, Mail, ShieldCheck } from '@lucide/vue'
+import { computed } from 'vue'
 import AppBrandMark from '@/components/AppBrandMark.vue'
 
 type LoginRealm = 'admin' | 'key'
-type SecretInputType = 'password' | 'text'
 
 const props = defineProps<{
   loading: boolean
@@ -21,7 +20,6 @@ const realm = defineModel<LoginRealm>('realm', { required: true })
 const username = defineModel<string>('username', { required: true })
 const password = defineModel<string>('password', { required: true })
 const apiKey = defineModel<string>('apiKey', { required: true })
-const isSecretVisible = shallowRef(false)
 
 const realmOptions = [
   { label: '管理员登录', value: 'admin', icon: ShieldCheck },
@@ -30,28 +28,15 @@ const realmOptions = [
 
 const isKeyRealm = computed(() => realm.value === 'key')
 const realmCaption = computed(() => isKeyRealm.value ? 'KEY REALM' : 'ADMIN REALM')
-const secretType = computed<SecretInputType>(() => (isSecretVisible.value ? 'text' : 'password'))
-const secretToggleLabel = computed(() => {
-  const target = isKeyRealm.value ? 'API Key' : '密码'
-  return `${isSecretVisible.value ? '隐藏' : '显示'}${target}`
-})
 const submitLabel = computed(() => {
   if (props.loading)
     return '正在登录...'
   return '登录'
 })
-
-watch(realm, () => {
-  isSecretVisible.value = false
-})
-
-function toggleSecretVisible(): void {
-  isSecretVisible.value = !isSecretVisible.value
-}
 </script>
 
 <template>
-  <BaseCard
+  <ZCard
     as="form"
     padding="none"
     class="login-form relative grid w-full content-start gap-8 rounded-lg px-7.5 pt-10 pb-6 max-[560px]:gap-6 max-[560px]:p-5.5"
@@ -61,9 +46,9 @@ function toggleSecretVisible(): void {
 
     <header class="flex min-w-0 items-center justify-between gap-4.5 max-[560px]:gap-3.5">
       <div class="flex min-w-0 items-center gap-2">
-        <BaseMotionIcon variant="brand" class="login-logo">
+        <ZMotionIcon variant="brand" class="login-logo">
           <AppBrandMark class="block size-10.5 select-none" />
-        </BaseMotionIcon>
+        </ZMotionIcon>
         <span class="grid min-w-0 gap-1">
           <strong
             class="text-[17px] leading-[1.3] font-semibold text-(--cp-login-brand-title-color) max-[560px]:text-cp-xl"
@@ -76,13 +61,13 @@ function toggleSecretVisible(): void {
         </span>
       </div>
 
-      <BaseSegmented
+      <ZSegmented
         v-model="realm"
         class="w-18 shrink-0 [--cp-color-bg-container:var(--cp-color-bg-elevated)] [--cp-color-fill-tertiary:var(--cp-login-input-bg)] [--cp-control-height-sm:34px] [&_svg]:size-4"
-        label="选择登录方式"
+        aria-label="选择登录方式"
         :options="realmOptions"
         display="icon"
-        size="sm"
+        size="small"
         :disabled="loading"
       />
     </header>
@@ -103,7 +88,7 @@ function toggleSecretVisible(): void {
       <template v-if="!isKeyRealm">
         <div class="grid min-w-0 gap-2">
           <span id="admin-username-label" class="text-cp leading-[1.1] font-bold text-(--cp-login-label-color)">管理员账号</span>
-          <BaseInput
+          <ZInput
             v-model="username"
             name="username"
             aria-label="管理员账号"
@@ -113,48 +98,35 @@ function toggleSecretVisible(): void {
             <template #prefix>
               <Mail :size="17" />
             </template>
-          </BaseInput>
+          </ZInput>
         </div>
 
         <div class="grid min-w-0 gap-2">
           <span class="text-cp leading-[1.1] font-bold text-(--cp-login-label-color)">访问密钥</span>
-          <BaseInput
+          <ZInput
             v-model="password"
             name="password"
             aria-label="访问密钥"
             placeholder="输入会话密钥"
-            :type="secretType"
+            show-password
             autocomplete="current-password"
           >
             <template #prefix>
               <KeyRound :size="17" />
             </template>
-            <template #suffix>
-              <BaseIconButton
-                variant="ghost"
-                size="sm"
-                class="login-password-toggle"
-                :label="secretToggleLabel"
-                @mousedown.prevent
-                @click="toggleSecretVisible"
-              >
-                <EyeOff v-if="isSecretVisible" :size="16" />
-                <Eye v-else :size="16" />
-              </BaseIconButton>
-            </template>
-          </BaseInput>
+          </ZInput>
         </div>
       </template>
 
       <div v-else class="grid min-w-0 gap-2">
         <span id="client-api-key-label" class="text-cp leading-[1.1] font-bold text-(--cp-login-label-color)">访问密钥</span>
-        <BaseInput
+        <ZInput
           id="client-api-key"
           v-model="apiKey"
           name="apiKey"
           aria-labelledby="client-api-key-label"
           placeholder="输入 API Key"
-          :type="secretType"
+          show-password
           autocomplete="off"
           autocapitalize="none"
           spellcheck="false"
@@ -162,35 +134,22 @@ function toggleSecretVisible(): void {
           <template #prefix>
             <KeyRound :size="17" />
           </template>
-          <template #suffix>
-            <BaseIconButton
-              variant="ghost"
-              size="sm"
-              class="login-password-toggle"
-              :label="secretToggleLabel"
-              @mousedown.prevent
-              @click="toggleSecretVisible"
-            >
-              <EyeOff v-if="isSecretVisible" :size="16" />
-              <Eye v-else :size="16" />
-            </BaseIconButton>
-          </template>
-        </BaseInput>
+        </ZInput>
       </div>
       <div class="min-w-0">
-        <BaseButton
-          variant="primary"
-          size="lg"
-          type="submit"
+        <ZButton
+          type="primary"
+          size="large"
+          native-type="submit"
           class="login-submit"
           :loading="props.loading"
           :disabled="props.submitDisabled"
         >
           <span>{{ submitLabel }}</span>
-        </BaseButton>
+        </ZButton>
       </div>
     </div>
-  </BaseCard>
+  </ZCard>
 </template>
 
 <style scoped>
@@ -264,18 +223,6 @@ function toggleSecretVisible(): void {
   line-height: 1;
 }
 
-.login-password-toggle {
-  --cp-color-fill-quaternary: color-mix(in srgb, var(--cp-input-hover-bg) 62%, transparent);
-  --cp-color-fill-tertiary: color-mix(in srgb, var(--cp-input-hover-bg) 88%, transparent);
-
-  color: var(--cp-login-placeholder-color);
-  border-radius: 6px;
-}
-
-.login-password-toggle:hover {
-  color: var(--cp-login-title-color);
-}
-
 .login-submit {
   width: 100%;
   height: 44px;
diff --git a/frontend/src/views/plugins/components/PluginAssetPicker.vue b/frontend/src/views/plugins/components/PluginAssetPicker.vue
index 8cc4fac65..aa3afbb1e 100644
--- a/frontend/src/views/plugins/components/PluginAssetPicker.vue
+++ b/frontend/src/views/plugins/components/PluginAssetPicker.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { PluginReleaseAsset } from '@/api'
-import { BasePopover, BaseScrollbar, BaseTag } from '@codex-proxy/ui'
+import { ZPopover, ZScrollbar, ZTag } from '@codex-proxy/ui'
 import { ChevronDown, FileArchive } from '@lucide/vue'
 import { useElementSize, useEventListener } from '@vueuse/core'
 import { computed, nextTick, shallowRef, useId, useTemplateRef, watch } from 'vue'
@@ -63,8 +63,8 @@ watch(() => props.disabled, (value) => {
 </script>
 
 <template>
-  <BasePopover v-model="open" placement="bottom-start" :disabled="disabled" class="w-full min-w-0">
-    <template #trigger>
+  <ZPopover v-model="open" placement="bottom-start" :disabled="disabled" class="w-full min-w-0">
+    <template #reference>
       <button
         ref="trigger"
         type="button"
@@ -91,7 +91,7 @@ watch(() => props.disabled, (value) => {
       </button>
     </template>
     <div :id="panelId" ref="panel" role="listbox" aria-label="插件包" aria-required="true" :style="{ width: `${width}px` }" class="max-w-[calc(100vw-2rem)] p-1.5">
-      <BaseScrollbar max-height="min(18rem, 45dvh)">
+      <ZScrollbar max-height="min(18rem, 45dvh)">
         <div class="grid gap-0.5 p-0.5">
           <button
             v-for="asset in assets"
@@ -107,12 +107,12 @@ watch(() => props.disabled, (value) => {
             @click="select(asset.name)"
           >
             <span class="min-w-0 flex-1 truncate text-cp-sm" :class="selected === asset.name ? 'text-cp-primary-text' : 'text-cp-text'">{{ asset.name }}</span>
-            <BaseTag class="shrink-0 tabular-nums">
+            <ZTag class="shrink-0 tabular-nums">
               {{ formatPluginFileSize(asset.size) }}
-            </BaseTag>
+            </ZTag>
           </button>
         </div>
-      </BaseScrollbar>
+      </ZScrollbar>
     </div>
-  </BasePopover>
+  </ZPopover>
 </template>
diff --git a/frontend/src/views/plugins/components/PluginBindingEditor.vue b/frontend/src/views/plugins/components/PluginBindingEditor.vue
index 0a67106a3..ffffe2e52 100644
--- a/frontend/src/views/plugins/components/PluginBindingEditor.vue
+++ b/frontend/src/views/plugins/components/PluginBindingEditor.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { PluginArtifactMetadata, PluginCapabilityBinding } from '@/api'
-import { BaseCheckbox, BaseFormItem, BaseNumberInput, BaseSelect, BaseSwitch } from '@codex-proxy/ui'
+import { ZCheckbox, ZFormItem, ZInputNumber, ZSelect, ZSwitch } from '@codex-proxy/ui'
 import { computed, ref, watch } from 'vue'
 import { pluginCapabilityLabel, pluginRequestBindingEntries } from '../utils/model'
 import PluginHelpPopover from './PluginHelpPopover.vue'
@@ -63,7 +63,7 @@ watch(valid, value => emit('validityChange', value), { immediate: true })
   <div class="grid gap-4">
     <article v-for="entry in entries" :key="entry.key" class="grid gap-4 rounded-cp bg-cp-fill-alter p-4">
       <div class="flex items-center gap-2">
-        <BaseSwitch :model-value="Boolean(bindingFor(entry.key))" :label="`${pluginCapabilityLabel(entry.capability)} · ${entry.label}`" show-label :disabled="disabled" @update:model-value="toggle(entry, $event)" />
+        <ZSwitch :model-value="Boolean(bindingFor(entry.key))" :label="`${pluginCapabilityLabel(entry.capability)} · ${entry.label}`" :disabled="disabled" @update:model-value="toggle(entry, $event)" />
         <PluginHelpPopover v-if="entry.stage === 'observation'" label="请求观察说明">
           仅观察请求，不改变请求结果
         </PluginHelpPopover>
@@ -73,33 +73,33 @@ watch(valid, value => emit('validityChange', value), { immediate: true })
           {{ entry.globalLabel }}
         </p>
         <div v-else class="flex items-center gap-2">
-          <BaseCheckbox :model-value="globalScopes.has(entry.key)" label="应用于所有请求" show-label :disabled="disabled" @update:model-value="setGlobal(entry.key, $event)" />
+          <ZCheckbox :model-value="globalScopes.has(entry.key)" label="应用于所有请求" :disabled="disabled" @update:model-value="setGlobal(entry.key, $event)" />
           <PluginHelpPopover label="生效请求范围说明">
             关闭后至少选择一项范围，不同条件同时满足才生效，同一条件内任意一项匹配即可
           </PluginHelpPopover>
         </div>
         <div v-if="entry.scope !== 'none' && !globalScopes.has(entry.key)" class="grid gap-4 sm:grid-cols-2">
-          <BaseFormItem label="客户端 Key">
+          <ZFormItem label="客户端 Key">
             <PluginResourcePicker :model-value="bindingFor(entry.key)!.clientKeyIds" kind="keys" :active="active" :disabled="disabled" @update:model-value="patch(entry.key, { clientKeyIds: $event })" />
-          </BaseFormItem>
-          <BaseFormItem label="账号分组">
+          </ZFormItem>
+          <ZFormItem label="账号分组">
             <PluginResourcePicker :model-value="bindingFor(entry.key)!.accountGroupIds" kind="groups" :active="active" :disabled="disabled" @update:model-value="patch(entry.key, { accountGroupIds: $event })" />
-          </BaseFormItem>
+          </ZFormItem>
           <PluginScopeInput :model-value="bindingFor(entry.key)!.models" label="模型范围" placeholder="每行一个模型名称，精确匹配" :class="entry.scope === 'model' ? 'sm:col-span-2' : undefined" :disabled="disabled" @update:model-value="patch(entry.key, { models: $event })" />
           <PluginScopeInput v-if="entry.scope === 'provider'" :model-value="bindingFor(entry.key)!.providerIds" label="Provider 范围" placeholder="每行一个 Provider 标识" :disabled="disabled" @update:model-value="patch(entry.key, { providerIds: $event })" />
         </div>
         <div v-if="entry.stage !== 'observation'" class="grid items-end gap-4" :class="entry.stage !== 'upstream' ? 'sm:grid-cols-2' : undefined">
-          <BaseFormItem v-if="entry.stage !== 'upstream'" label="执行顺序">
+          <ZFormItem v-if="entry.stage !== 'upstream'" label="执行顺序">
             <template #label-extra>
               <PluginHelpPopover label="执行顺序说明">
                 数值较小的先执行
               </PluginHelpPopover>
             </template>
-            <BaseNumberInput :model-value="bindingFor(entry.key)!.order" label="执行顺序" size="md" :min="-2147483648" :max="2147483647" :disabled="disabled" class="w-full" @update:model-value="patch(entry.key, { order: $event })" />
-          </BaseFormItem>
-          <BaseFormItem label="插件失败时">
-            <BaseSelect :model-value="bindingFor(entry.key)!.failurePolicy" :options="entry.stage === 'retry' ? [{ label: '交给后续处理', value: 'delegate' }] : entry.stage === 'upstream' ? [{ label: '拒绝请求', value: 'reject' }] : [{ label: '拒绝请求', value: 'reject' }, { label: '交给后续处理', value: 'delegate' }]" :disabled="disabled || ['retry', 'upstream'].includes(entry.stage)" class="w-full" @update:model-value="patch(entry.key, { failurePolicy: $event as 'reject' | 'delegate' })" />
-          </BaseFormItem>
+            <ZInputNumber :model-value="bindingFor(entry.key)!.order" aria-label="执行顺序" size="default" :min="-2147483648" :max="2147483647" :disabled="disabled" class="w-full" @update:model-value="patch(entry.key, { order: $event })" />
+          </ZFormItem>
+          <ZFormItem label="插件失败时">
+            <ZSelect :model-value="bindingFor(entry.key)!.failurePolicy" :options="entry.stage === 'retry' ? [{ label: '交给后续处理', value: 'delegate' }] : entry.stage === 'upstream' ? [{ label: '拒绝请求', value: 'reject' }] : [{ label: '拒绝请求', value: 'reject' }, { label: '交给后续处理', value: 'delegate' }]" :disabled="disabled || ['retry', 'upstream'].includes(entry.stage)" class="w-full" @update:model-value="patch(entry.key, { failurePolicy: $event as 'reject' | 'delegate' })" />
+          </ZFormItem>
         </div>
       </template>
     </article>
diff --git a/frontend/src/views/plugins/components/PluginCapabilityTags.vue b/frontend/src/views/plugins/components/PluginCapabilityTags.vue
index 8eb0f884d..1a125a977 100644
--- a/frontend/src/views/plugins/components/PluginCapabilityTags.vue
+++ b/frontend/src/views/plugins/components/PluginCapabilityTags.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { PluginArtifactMetadata } from '@/api'
-import { BasePopover, BaseTag } from '@codex-proxy/ui'
+import { ZPopover, ZTag } from '@codex-proxy/ui'
 import { computed, shallowRef, useId } from 'vue'
 import { pluginCapabilityLabel } from '../utils/model'
 
@@ -18,11 +18,11 @@ const hidden = computed(() => entries.value.slice(2))
 
 <template>
   <div class="flex min-w-0 items-center gap-1 whitespace-nowrap">
-    <BaseTag v-for="[capability, contribution] in visible" :key="capability" size="sm" :type="primary ? 'primary' : 'neutral'" class="min-w-0">
+    <ZTag v-for="[capability, contribution] in visible" :key="capability" size="small" :type="primary ? 'primary' : 'default'" class="min-w-0">
       <span class="block truncate" :title="`${pluginCapabilityLabel(capability)} · ${contribution.id}`">{{ pluginCapabilityLabel(capability) }}</span>
-    </BaseTag>
-    <BasePopover v-if="hidden.length" v-model="open" trigger="hover-click" placement="top" class="shrink-0">
-      <template #trigger>
+    </ZTag>
+    <ZPopover v-if="hidden.length" v-model="open" trigger="hover-click" placement="top" class="shrink-0">
+      <template #reference>
         <button
           type="button"
           class="cursor-pointer rounded-cp border-0 bg-transparent p-0 outline-none focus-visible:ring-2 focus-visible:ring-cp-control-outline"
@@ -30,17 +30,17 @@ const hidden = computed(() => entries.value.slice(2))
           :aria-expanded="open"
           :aria-describedby="open ? contentId : undefined"
         >
-          <BaseTag size="sm" :type="primary ? 'primary' : 'neutral'">
+          <ZTag size="small" :type="primary ? 'primary' : 'default'">
             +{{ hidden.length }}
-          </BaseTag>
+          </ZTag>
         </button>
       </template>
       <div :id="contentId" role="tooltip" class="flex max-w-72 flex-wrap gap-1.5 p-3">
-        <BaseTag v-for="[capability, contribution] in hidden" :key="capability" size="sm" :type="primary ? 'primary' : 'neutral'">
+        <ZTag v-for="[capability, contribution] in hidden" :key="capability" size="small" :type="primary ? 'primary' : 'default'">
           <span :title="contribution.id">{{ pluginCapabilityLabel(capability) }}</span>
-        </BaseTag>
+        </ZTag>
       </div>
-    </BasePopover>
+    </ZPopover>
     <span v-if="!entries.length" class="text-cp-text-quaternary">无</span>
   </div>
 </template>
diff --git a/frontend/src/views/plugins/components/PluginCatalogPanel.vue b/frontend/src/views/plugins/components/PluginCatalogPanel.vue
index d5e70c6af..cb23ee1f8 100644
--- a/frontend/src/views/plugins/components/PluginCatalogPanel.vue
+++ b/frontend/src/views/plugins/components/PluginCatalogPanel.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { InstalledPlugin } from '../utils/catalog'
-import { BaseButton, BaseCard, BaseEmpty, BaseIconButton, BaseInput, BaseScrollbar, BaseSegmented, BaseSelect, BaseTable, BaseTablePagination, BaseTag, defineTableColumns } from '@codex-proxy/ui'
+import { defineTableColumns, ZButton, ZCard, ZEmpty, ZIconButton, ZInput, ZPagination, ZScrollbar, ZSegmented, ZSelect, ZTable, ZTag } from '@codex-proxy/ui'
 import { LayoutGrid, List, Puzzle, Search, Settings2 } from '@lucide/vue'
 import { computed, shallowRef, watch } from 'vue'
 import { PLUGIN_STATUS_LABELS } from '../constants'
@@ -53,41 +53,41 @@ const columns = defineTableColumns<(typeof rows.value)[number]>([
 <template>
   <div class="flex h-full min-h-0 flex-col gap-2">
     <div class="flex shrink-0 flex-wrap items-center gap-3 p-1">
-      <BaseInput v-model="search" aria-label="搜索已安装插件" placeholder="搜索插件、发布者" class="min-w-0 flex-1 basis-full sm:max-w-72 sm:basis-auto">
+      <ZInput v-model="search" aria-label="搜索已安装插件" placeholder="搜索插件、发布者" class="min-w-0 flex-1 basis-full sm:max-w-72 sm:basis-auto">
         <template #prefix>
           <Search class="size-4" />
         </template>
-      </BaseInput>
-      <BaseSelect v-model="status" :options="statusOptions" aria-label="插件状态" class="w-36" />
-      <BaseSegmented v-model="display" :options="displayOptions" label="插件显示方式" display="icon" class="ml-auto w-20 shrink-0" />
+      </ZInput>
+      <ZSelect v-model="status" :options="statusOptions" aria-label="插件状态" class="w-36" />
+      <ZSegmented v-model="display" :options="displayOptions" aria-label="插件显示方式" display="icon" class="ml-auto w-20 shrink-0" />
     </div>
     <div v-if="loading && !plugins.length" class="min-h-0 flex-1" aria-busy="true" />
-    <BaseEmpty v-else-if="!filtered.length" :icon="Puzzle" :title="plugins.length ? '没有匹配的插件' : '安装第一个插件'" :description="plugins.length ? '试试其他名称或状态' : '从上方安装插件，请先确认来源可信'" surface="none" class="flex-1 content-center">
+    <ZEmpty v-else-if="!filtered.length" :icon="Puzzle" :title="plugins.length ? '没有匹配的插件' : '安装第一个插件'" :description="plugins.length ? '试试其他名称或状态' : '从上方安装插件，请先确认来源可信'" surface="none" class="flex-1 content-center">
       <template v-if="plugins.length" #action>
-        <BaseButton variant="secondary" @click="search = ''; status = 'all'">
+        <ZButton @click="search = ''; status = 'all'">
           清除筛选
-        </BaseButton>
+        </ZButton>
       </template>
-    </BaseEmpty>
-    <BaseScrollbar v-else-if="display === 'cards'" class="min-h-0 flex-1" :aria-busy="loading">
+    </ZEmpty>
+    <ZScrollbar v-else-if="display === 'cards'" class="min-h-0 flex-1" :aria-busy="loading">
       <ul class="m-0 grid list-none grid-cols-[repeat(auto-fill,minmax(min(100%,30rem),1fr))] items-start gap-4 p-1" aria-label="已安装插件">
         <li v-for="plugin in rows" :key="plugin.id">
-          <BaseCard padding="compact">
+          <ZCard padding="compact">
             <div class="flex min-w-0 items-start gap-3">
               <PluginIcon :artifact="plugin.artifact" class="size-10 shrink-0 rounded-cp" />
               <div class="grid min-w-0 flex-1 gap-1">
                 <div class="flex min-w-0 items-center gap-2">
                   <strong class="truncate text-cp-sm">{{ plugin.artifact.metadata.displayName }}</strong>
-                  <BaseTag size="sm" class="shrink-0" :title="plugin.versionTitle" :aria-label="plugin.versionTitle">
+                  <ZTag size="small" class="shrink-0" :title="plugin.versionTitle" :aria-label="plugin.versionTitle">
                     <span class="block max-w-28 truncate">{{ plugin.versionLabel }}</span>
-                  </BaseTag>
+                  </ZTag>
                 </div>
                 <span class="truncate text-cp-xs text-cp-text-secondary">{{ plugin.artifact.metadata.publisher }}</span>
               </div>
               <PluginStatusNotice v-if="currentPluginInstance(plugin)" :instance="currentPluginInstance(plugin)!" />
-              <BaseTag :type="pluginStatusType(pluginStatus(plugin))" size="sm">
+              <ZTag :type="pluginStatusType(pluginStatus(plugin))" size="small">
                 {{ PLUGIN_STATUS_LABELS[pluginStatus(plugin)] }}
-              </BaseTag>
+              </ZTag>
             </div>
             <p class="my-4 line-clamp-2 min-h-10 text-cp-sm leading-relaxed text-cp-text-secondary">
               {{ plugin.artifact.metadata.description || '发布者未提供说明' }}
@@ -95,24 +95,24 @@ const columns = defineTableColumns<(typeof rows.value)[number]>([
             <PluginCapabilityTags :metadata="plugin.artifact.metadata" />
             <div class="mt-5 flex flex-wrap items-center justify-between gap-3">
               <span class="text-cp-xs text-cp-text-secondary">{{ plugin.artifacts.length }} 个版本</span>
-              <BaseIconButton class="ml-auto" :label="`管理 ${plugin.artifact.metadata.displayName}`" variant="secondary" size="sm" @click="$emit('manage', plugin)">
+              <ZIconButton class="ml-auto" :aria-label="`管理 ${plugin.artifact.metadata.displayName}`" variant="solid" size="small" @click="$emit('manage', plugin)">
                 <Settings2 class="size-4" />
-              </BaseIconButton>
+              </ZIconButton>
             </div>
-          </BaseCard>
+          </ZCard>
         </li>
       </ul>
-    </BaseScrollbar>
-    <BaseTable v-else class="min-h-0 flex-1" :columns="columns" :rows="rows" :row-key="row => row.id" :aria-busy="loading">
+    </ZScrollbar>
+    <ZTable v-else class="min-h-0 flex-1" :columns="columns" :data="rows" :row-key="row => row.id" :aria-busy="loading">
       <template #plugin="{ row }">
         <div class="flex min-w-0 items-center gap-3">
           <PluginIcon :artifact="row.artifact" class="size-9 rounded-cp" />
           <div class="grid min-w-0 gap-1">
             <div class="flex min-w-0 items-center gap-2">
               <strong class="truncate">{{ row.artifact.metadata.displayName }}</strong>
-              <BaseTag size="sm" class="shrink-0" :title="row.versionTitle" :aria-label="row.versionTitle">
+              <ZTag size="small" class="shrink-0" :title="row.versionTitle" :aria-label="row.versionTitle">
                 <span class="block max-w-28 truncate">{{ row.versionLabel }}</span>
-              </BaseTag>
+              </ZTag>
             </div>
             <span class="truncate text-cp-xs text-cp-text-secondary">{{ row.artifact.metadata.publisher }}</span>
           </div>
@@ -121,9 +121,9 @@ const columns = defineTableColumns<(typeof rows.value)[number]>([
       <template #status="{ row }">
         <div class="flex items-center gap-1.5">
           <PluginStatusNotice v-if="currentPluginInstance(row)" :instance="currentPluginInstance(row)!" />
-          <BaseTag :type="pluginStatusType(pluginStatus(row))">
+          <ZTag :type="pluginStatusType(pluginStatus(row))">
             {{ PLUGIN_STATUS_LABELS[pluginStatus(row)] }}
-          </BaseTag>
+          </ZTag>
         </div>
       </template>
       <template #capabilities="{ row }">
@@ -133,11 +133,11 @@ const columns = defineTableColumns<(typeof rows.value)[number]>([
         {{ row.artifacts.length }} 个版本
       </template>
       <template #actions="{ row }">
-        <BaseIconButton size="sm" variant="secondary" :label="`管理 ${row.artifact.metadata.displayName}`" @click="$emit('manage', row)">
+        <ZIconButton size="small" variant="solid" :aria-label="`管理 ${row.artifact.metadata.displayName}`" @click="$emit('manage', row)">
           <Settings2 class="size-4" />
-        </BaseIconButton>
+        </ZIconButton>
       </template>
-    </BaseTable>
-    <BaseTablePagination :pagination="pagination" :loading="loading" @page-change="page = $event" @page-size-change="pageSize = $event" />
+    </ZTable>
+    <ZPagination v-bind="pagination" :disabled="loading" @current-change="page = $event" @size-change="pageSize = $event" />
   </div>
 </template>
diff --git a/frontend/src/views/plugins/components/PluginConfigurationFields.vue b/frontend/src/views/plugins/components/PluginConfigurationFields.vue
index f8309d64d..5dd01645e 100644
--- a/frontend/src/views/plugins/components/PluginConfigurationFields.vue
+++ b/frontend/src/views/plugins/components/PluginConfigurationFields.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { JsonSchema } from '../utils/model'
-import { BaseEmpty, BaseFormItem, BaseInput, BaseTag } from '@codex-proxy/ui'
+import { ZEmpty, ZFormItem, ZInput, ZTag } from '@codex-proxy/ui'
 
 import { computed, nextTick, shallowRef, useTemplateRef, watch } from 'vue'
 
@@ -153,10 +153,10 @@ defineExpose({ focusInvalid, validationMessage })
 </script>
 
 <template>
-  <BaseEmpty
+  <ZEmpty
     v-if="!hasFields"
     title="无需填写插件参数"
-    size="sm"
+    size="small"
     surface="inset"
     class="min-h-40 content-center"
   />
@@ -177,15 +177,15 @@ defineExpose({ focusInvalid, validationMessage })
         <PluginHelpPopover label="敏感配置说明">
           敏感配置单独保存，不回显已有值，选择保留时不会更改，选择替换时以本次填写的全部值覆盖
         </PluginHelpPopover>
-        <BaseTag v-if="existingSecretFields.length > 0" type="success" size="sm">
+        <ZTag v-if="existingSecretFields.length > 0" type="success" size="small">
           已保存 {{ existingSecretFields.length }} 项
-        </BaseTag>
+        </ZTag>
       </div>
       <p v-if="secretMode === 'clear'" class="m-0 text-cp-xs text-cp-warning-text">
         保存时清除全部敏感配置
       </p>
       <div ref="secretFieldsRoot" class="contents">
-        <BaseFormItem
+        <ZFormItem
           v-for="field in secretMode === 'replace' ? secretSchemas : []"
           :key="field.name"
           :label="field.schema.title || field.name"
@@ -197,7 +197,7 @@ defineExpose({ focusInvalid, validationMessage })
               {{ field.schema.description }}
             </PluginHelpPopover>
           </template>
-          <BaseInput
+          <ZInput
             :model-value="secrets[field.name] ?? ''"
             type="password"
             autocomplete="new-password"
@@ -207,7 +207,7 @@ defineExpose({ focusInvalid, validationMessage })
             placeholder="输入新值"
             @update:model-value="setSecret(field.name, $event)"
           />
-        </BaseFormItem>
+        </ZFormItem>
       </div>
     </template>
   </div>
diff --git a/frontend/src/views/plugins/components/PluginConfigurationModal.vue b/frontend/src/views/plugins/components/PluginConfigurationModal.vue
index d12a0a31c..47a5db79e 100644
--- a/frontend/src/views/plugins/components/PluginConfigurationModal.vue
+++ b/frontend/src/views/plugins/components/PluginConfigurationModal.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { ConfigurePluginInstanceRequest, PluginArtifact, PluginInstance, PluginVersionPlan } from '@/api'
-import { BaseButton, BaseModal, BaseSegmented, toast } from '@codex-proxy/ui'
+import { ZButton, ZDialog, ZNotification, ZSegmented } from '@codex-proxy/ui'
 import { Blocks, Save, Settings2, ShieldCheck } from '@lucide/vue'
 import { cloneDeep } from 'es-toolkit'
 import { computed, nextTick, ref, shallowRef, useTemplateRef, watch } from 'vue'
@@ -63,18 +63,18 @@ async function submit() {
   if (!instance || !artifact)
     return
   if (!configurationValid.value) {
-    toast.warning(configurationFields.value?.validationMessage || '请检查插件参数')
+    ZNotification.warning({ message: configurationFields.value?.validationMessage || '请检查插件参数' })
     await focusConfigurationInvalid()
     return
   }
   if (!bindingsValid.value) {
     section.value = 'requests'
-    toast.warning('请设置请求范围，或勾选“应用于所有请求”')
+    ZNotification.warning({ message: '请设置请求范围，或勾选“应用于所有请求”' })
     return
   }
   if (!authenticationValid.value) {
     section.value = 'authentication'
-    toast.warning(authenticationEditor.value?.validationError || '请检查客户端认证身份映射')
+    ZNotification.warning({ message: authenticationEditor.value?.validationError || '请检查客户端认证身份映射' })
     return
   }
   const input: ConfigurePluginInstanceRequest = {
@@ -110,19 +110,19 @@ function clearSecrets() {
 </script>
 
 <template>
-  <BaseModal v-model="open" :title="versionChanged ? `切换至 ${artifact?.metadata.version}` : '插件设置'" :description="artifact ? `${artifact.metadata.displayName} · ${artifact.metadata.version}` : undefined" size="lg" :dismissible="!saving" @after-leave="clearSecrets">
+  <ZDialog v-model="open" :title="versionChanged ? `切换至 ${artifact?.metadata.version}` : '插件设置'" :description="artifact ? `${artifact.metadata.displayName} · ${artifact.metadata.version}` : undefined" width="48rem" :show-close="!saving" :close-on-click-modal="!saving" :close-on-press-escape="!saving" @closed="clearSecrets">
     <div v-if="artifact && instance" class="grid gap-5">
       <div v-if="error" role="alert" class="grid gap-1 text-cp-sm text-cp-warning-text">
         <span>{{ error }}</span>
         <span class="text-cp-xs text-cp-text-secondary">当前版本保持不变，修改后再应用</span>
       </div>
-      <BaseSegmented v-if="sections.length > 1" v-model="section" :options="sections" label="插件设置分区" :disabled="saving" class="w-fit max-w-full" />
+      <ZSegmented v-if="sections.length > 1" v-model="section" :options="sections" aria-label="插件设置分区" :disabled="saving" class="w-fit max-w-full" />
       <div v-show="section === 'general'" class="grid gap-5">
-        <BaseSegmented
+        <ZSegmented
           v-if="existingSecretFields.length"
           v-model="secretMode"
           :options="secretModes"
-          label="敏感配置保存方式"
+          aria-label="敏感配置保存方式"
           :disabled="saving"
           class="w-full sm:w-auto"
         />
@@ -160,15 +160,15 @@ function clearSecrets() {
       />
     </div>
     <template #footer>
-      <BaseButton variant="secondary" :disabled="saving" @click="open = false">
+      <ZButton :disabled="saving" @click="open = false">
         取消
-      </BaseButton>
-      <BaseButton variant="primary" :loading="saving" :disabled="!instance || !artifact" @click="submit">
+      </ZButton>
+      <ZButton type="primary" :loading="saving" :disabled="!instance || !artifact" @click="submit">
         <template #icon>
           <Save class="size-4" />
         </template>
         {{ primaryLabel }}
-      </BaseButton>
+      </ZButton>
     </template>
-  </BaseModal>
+  </ZDialog>
 </template>
diff --git a/frontend/src/views/plugins/components/PluginConfigurationSummary.vue b/frontend/src/views/plugins/components/PluginConfigurationSummary.vue
index 2122fd0b9..d582684e7 100644
--- a/frontend/src/views/plugins/components/PluginConfigurationSummary.vue
+++ b/frontend/src/views/plugins/components/PluginConfigurationSummary.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { PluginArtifactMetadata, PluginCapabilityBinding, PluginInstance } from '@/api'
-import { BaseScrollbar } from '@codex-proxy/ui'
+import { ZScrollbar } from '@codex-proxy/ui'
 import { ChevronDown } from '@lucide/vue'
 import { computed } from 'vue'
 import { PLUGIN_OBSERVER_EVENT_LABELS, PLUGIN_REQUEST_STAGES } from '../constants'
@@ -93,7 +93,7 @@ function scopeLabel(binding: PluginCapabilityBinding) {
         <ChevronDown class="size-3.5 transition-transform group-open:rotate-180 motion-reduce:transition-none" aria-hidden="true" />
       </span>
     </summary>
-    <BaseScrollbar class="mt-4 -mr-3" max-height="min(22rem, 38dvh)" role="region" :aria-label="`${instance.name} 的功能详情`">
+    <ZScrollbar class="mt-4 -mr-3" max-height="min(22rem, 38dvh)" role="region" :aria-label="`${instance.name} 的功能详情`">
       <div class="grid gap-5 pr-6">
         <dl v-if="groups.length" class="m-0 grid grid-cols-1 gap-x-8 gap-y-4 sm:grid-cols-2">
           <div v-for="group in groups" :key="group.id" class="grid min-w-0 content-start gap-1">
@@ -113,6 +113,6 @@ function scopeLabel(binding: PluginCapabilityBinding) {
           <code class="break-all">codex-proxy-rs plugin {{ instance.id }} --help</code>
         </div>
       </div>
-    </BaseScrollbar>
+    </ZScrollbar>
   </details>
 </template>
diff --git a/frontend/src/views/plugins/components/PluginDetailModal.vue b/frontend/src/views/plugins/components/PluginDetailModal.vue
index cab98c9ee..068728258 100644
--- a/frontend/src/views/plugins/components/PluginDetailModal.vue
+++ b/frontend/src/views/plugins/components/PluginDetailModal.vue
@@ -2,7 +2,7 @@
 import type { InstalledPlugin } from '../utils/catalog'
 import type { PluginArtifact, PluginInstance, PluginManagementView } from '@/api'
 import { ArrowInDownSquareHalf } from '@boxicons/vue'
-import { BaseButton, BaseEmpty, BaseIconButton, BaseModal, BaseSegmented, BaseTag } from '@codex-proxy/ui'
+import { ZButton, ZDialog, ZEmpty, ZIconButton, ZSegmented, ZTag } from '@codex-proxy/ui'
 import { ArrowUpRight, History, Layers, Play, Power, RefreshCw, Settings2 } from '@lucide/vue'
 import { computed, shallowRef, watch } from 'vue'
 import { RouterLink } from 'vue-router'
@@ -60,38 +60,38 @@ watch(() => props.initialSection, value => section.value = value)
 </script>
 
 <template>
-  <BaseModal v-model="open" :title="plugin?.artifact.metadata.displayName ?? '插件详情'" :description="plugin?.artifact.metadata.description" size="md-wide" :dismissible="!busy">
+  <ZDialog v-model="open" :title="plugin?.artifact.metadata.displayName ?? '插件详情'" :description="plugin?.artifact.metadata.description" width="42rem" :show-close="!busy" :close-on-click-modal="!busy" :close-on-press-escape="!busy">
     <div v-if="plugin" class="grid gap-5">
       <div class="flex flex-wrap items-center gap-3">
-        <BaseSegmented v-model="section" :options="sections" label="插件详情分区" class="w-44" />
+        <ZSegmented v-model="section" :options="sections" aria-label="插件详情分区" class="w-44" />
         <div v-if="plugin.artifact.source.kind !== 'builtin'" class="ml-auto flex items-center gap-2">
-          <BaseIconButton v-if="plugin.source?.source.kind === 'github' || plugin.source?.source.kind === 'url'" label="检查更新" variant="secondary" :disabled="busy" @click="$emit('checkUpdate', plugin)">
+          <ZIconButton v-if="plugin.source?.source.kind === 'github' || plugin.source?.source.kind === 'url'" aria-label="检查更新" variant="solid" :disabled="busy" @click="$emit('checkUpdate', plugin)">
             <RefreshCw class="size-4" />
-          </BaseIconButton>
-          <BaseIconButton label="手动安装版本" variant="secondary" :disabled="busy" @click="$emit('installVersion', plugin)">
+          </ZIconButton>
+          <ZIconButton aria-label="手动安装版本" variant="solid" :disabled="busy" @click="$emit('installVersion', plugin)">
             <ArrowInDownSquareHalf pack="filled" class="size-5" />
-          </BaseIconButton>
+          </ZIconButton>
         </div>
       </div>
       <template v-if="section === 'configurations'">
-        <BaseEmpty v-if="!plugin.configurations.length" :title="acceptedArtifact ? '插件尚未初始化' : '插件待安装'" size="sm" surface="inset">
+        <ZEmpty v-if="!plugin.configurations.length" :title="acceptedArtifact ? '插件尚未初始化' : '插件待安装'" size="small" surface="inset">
           <template #action>
-            <BaseButton v-if="acceptedArtifact" variant="primary" @click="$emit('accept', acceptedArtifact)">
+            <ZButton v-if="acceptedArtifact" type="primary" @click="$emit('accept', acceptedArtifact)">
               初始化插件
-            </BaseButton>
-            <BaseButton v-else-if="pendingArtifact" variant="primary" @click="$emit('accept', pendingArtifact)">
+            </ZButton>
+            <ZButton v-else-if="pendingArtifact" type="primary" @click="$emit('accept', pendingArtifact)">
               安装
-            </BaseButton>
+            </ZButton>
           </template>
-        </BaseEmpty>
+        </ZEmpty>
         <article v-for="instance in current ? [current] : []" :key="instance.id" class="grid min-h-36 content-between gap-3 rounded-cp bg-cp-fill-alter p-4">
           <div class="flex flex-wrap items-center gap-2">
             <strong class="min-w-0 flex-1 wrap-break-word text-cp-sm">当前版本</strong>
-            <BaseTag>{{ artifactForInstance(instance, plugin.artifacts)?.metadata.version ?? '版本不可用' }}</BaseTag>
+            <ZTag>{{ artifactForInstance(instance, plugin.artifacts)?.metadata.version ?? '版本不可用' }}</ZTag>
             <PluginStatusNotice :instance="instance" />
-            <BaseTag :type="pluginStatusType(configurationStatus(instance))">
+            <ZTag :type="pluginStatusType(configurationStatus(instance))">
               {{ PLUGIN_STATUS_LABELS[configurationStatus(instance)] }}
-            </BaseTag>
+            </ZTag>
             <PluginHelpPopover v-if="configurationNotes(instance).length" :label="`${instance.name}配置状态说明`">
               <p v-for="note in configurationNotes(instance)" :key="note" class="m-0">
                 {{ note }}
@@ -110,21 +110,21 @@ watch(() => props.initialSection, value => section.value = value)
                 <ArrowUpRight class="size-3.5 shrink-0" />
               </RouterLink>
             </div>
-            <BaseIconButton v-if="instance.configurationRequired || (currentArtifact && hasPluginSettings(currentArtifact))" size="sm" variant="secondary" label="设置" :disabled="busy" @click="$emit('edit', instance)">
+            <ZIconButton v-if="instance.configurationRequired || (currentArtifact && hasPluginSettings(currentArtifact))" size="small" variant="solid" aria-label="设置" :disabled="busy" @click="$emit('edit', instance)">
               <Settings2 class="size-4" />
-            </BaseIconButton>
-            <BaseIconButton v-if="configurationStatus(instance) === 'failed'" label="重新启动" size="sm" variant="secondary" :disabled="busy || Boolean(instance.loadError)" @click="$emit('enable', instance)">
+            </ZIconButton>
+            <ZIconButton v-if="configurationStatus(instance) === 'failed'" aria-label="重新启动" size="small" variant="solid" :disabled="busy || Boolean(instance.loadError)" @click="$emit('enable', instance)">
               <RefreshCw class="size-4" />
-            </BaseIconButton>
-            <BaseIconButton v-if="instance.enabled" label="停用" size="sm" variant="secondary" :disabled="busy" @click="$emit('disable', instance)">
+            </ZIconButton>
+            <ZIconButton v-if="instance.enabled" aria-label="停用" size="small" variant="solid" :disabled="busy" @click="$emit('disable', instance)">
               <Power class="size-4" />
-            </BaseIconButton>
-            <BaseIconButton v-else :label="instance.configurationRequired ? '完成设置并启用' : '启用'" size="sm" variant="secondary" :disabled="busy || Boolean(instance.loadError)" @click="$emit('enable', instance)">
+            </ZIconButton>
+            <ZIconButton v-else :aria-label="instance.configurationRequired ? '完成设置并启用' : '启用'" size="small" variant="solid" :disabled="busy || Boolean(instance.loadError)" @click="$emit('enable', instance)">
               <Play class="size-4" />
-            </BaseIconButton>
-            <BaseIconButton v-if="plugin.artifacts.length > 1" label="回退版本" size="sm" variant="secondary" :disabled="busy" @click="$emit('rollback', instance)">
+            </ZIconButton>
+            <ZIconButton v-if="plugin.artifacts.length > 1" aria-label="回退版本" size="small" type="default" variant="solid" :disabled="busy" @click="$emit('rollback', instance)">
               <History class="size-4" />
-            </BaseIconButton>
+            </ZIconButton>
           </div>
         </article>
         <PluginLegacyConfigurations
@@ -140,12 +140,12 @@ watch(() => props.initialSection, value => section.value = value)
       <PluginVersionsPanel v-else :plugin="plugin" :busy="busy" @accept="$emit('accept', $event)" @switch-version="$emit('switchVersion', $event)" @delete-version="$emit('deleteVersion', $event)" />
     </div>
     <template #footer>
-      <BaseButton v-if="plugin && plugin.artifacts.every(artifact => artifact.source.kind !== 'builtin')" variant="destructive" :disabled="busy" @click="$emit('uninstall', plugin)">
+      <ZButton v-if="plugin && plugin.artifacts.every(artifact => artifact.source.kind !== 'builtin')" type="danger" variant="plain" :disabled="busy" @click="$emit('uninstall', plugin)">
         卸载插件
-      </BaseButton>
-      <BaseButton variant="secondary" :disabled="busy" @click="open = false">
+      </ZButton>
+      <ZButton :disabled="busy" @click="open = false">
         关闭
-      </BaseButton>
+      </ZButton>
     </template>
-  </BaseModal>
+  </ZDialog>
 </template>
diff --git a/frontend/src/views/plugins/components/PluginDownloadAuthentication.vue b/frontend/src/views/plugins/components/PluginDownloadAuthentication.vue
index cc442e4df..6e7b22912 100644
--- a/frontend/src/views/plugins/components/PluginDownloadAuthentication.vue
+++ b/frontend/src/views/plugins/components/PluginDownloadAuthentication.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { CreatePluginSourceCredentialRequest, PluginSourceAuthentication, PluginSourceCredential } from '@/api'
-import { BaseFormItem, BaseInput, BaseSelect } from '@codex-proxy/ui'
+import { ZFormItem, ZInput, ZSelect } from '@codex-proxy/ui'
 import { computed, reactive, shallowRef, watch } from 'vue'
 import { normalizePluginRepository } from '../utils/model'
 import PluginHelpPopover from './PluginHelpPopover.vue'
@@ -62,8 +62,8 @@ function clearSecrets() {
   Object.assign(form, { token: '', username: '', password: '', headerName: '', headerValue: '' })
 }
 
-function changeMode(value: string) {
-  mode.value = value
+function changeMode(value: string | undefined) {
+  mode.value = value ?? 'public'
   selected.value = []
   clearSecrets()
 }
@@ -103,7 +103,7 @@ watch([mode, scope, authentication], () => {
 
 <template>
   <div class="grid gap-4">
-    <BaseFormItem label="下载认证">
+    <ZFormItem label="下载认证">
       <template #label-extra>
         <PluginHelpPopover label="下载认证说明">
           <p class="m-0">
@@ -114,30 +114,30 @@ watch([mode, scope, authentication], () => {
           </p>
         </PluginHelpPopover>
       </template>
-      <BaseSelect :model-value="mode" :options="modeOptions" :disabled="disabled" class="w-full" aria-label="下载认证" @update:model-value="changeMode" />
-    </BaseFormItem>
+      <ZSelect :model-value="mode" :options="modeOptions" :disabled="disabled" class="w-full" aria-label="下载认证" @update:model-value="changeMode" />
+    </ZFormItem>
     <template v-if="mode === 'new'">
-      <BaseFormItem v-if="kind === 'url'" label="认证方式">
-        <BaseSelect v-model="form.kind" :options="authOptions" :disabled="disabled" class="w-full" aria-label="认证方式" @update:model-value="clearSecrets" />
-      </BaseFormItem>
-      <BaseFormItem v-if="kind === 'github' || form.kind === 'bearer'" :label="kind === 'github' ? 'GitHub 令牌' : '访问令牌'" required>
-        <BaseInput v-model="form.token" type="password" autocomplete="new-password" :disabled="disabled" aria-label="下载令牌" placeholder="输入令牌" />
-      </BaseFormItem>
+      <ZFormItem v-if="kind === 'url'" label="认证方式">
+        <ZSelect v-model="form.kind" :options="authOptions" :disabled="disabled" class="w-full" aria-label="认证方式" @update:model-value="clearSecrets" />
+      </ZFormItem>
+      <ZFormItem v-if="kind === 'github' || form.kind === 'bearer'" :label="kind === 'github' ? 'GitHub 令牌' : '访问令牌'" required>
+        <ZInput v-model="form.token" type="password" autocomplete="new-password" :disabled="disabled" aria-label="下载令牌" placeholder="输入令牌" />
+      </ZFormItem>
       <div v-else-if="form.kind === 'basic'" class="grid gap-4 sm:grid-cols-2">
-        <BaseFormItem label="用户名" required>
-          <BaseInput v-model="form.username" autocomplete="off" :disabled="disabled" aria-label="下载用户名" />
-        </BaseFormItem>
-        <BaseFormItem label="密码" required>
-          <BaseInput v-model="form.password" type="password" autocomplete="new-password" :disabled="disabled" aria-label="下载密码" />
-        </BaseFormItem>
+        <ZFormItem label="用户名" required>
+          <ZInput v-model="form.username" autocomplete="off" :disabled="disabled" aria-label="下载用户名" />
+        </ZFormItem>
+        <ZFormItem label="密码" required>
+          <ZInput v-model="form.password" type="password" autocomplete="new-password" :disabled="disabled" aria-label="下载密码" />
+        </ZFormItem>
       </div>
       <div v-else class="grid gap-4 sm:grid-cols-2">
-        <BaseFormItem label="请求头名称" required>
-          <BaseInput v-model="form.headerName" :disabled="disabled" aria-label="请求头名称" placeholder="X-Download-Token" />
-        </BaseFormItem>
-        <BaseFormItem label="请求头值" required>
-          <BaseInput v-model="form.headerValue" type="password" autocomplete="new-password" :disabled="disabled" aria-label="请求头值" />
-        </BaseFormItem>
+        <ZFormItem label="请求头名称" required>
+          <ZInput v-model="form.headerName" :disabled="disabled" aria-label="请求头名称" placeholder="X-Download-Token" />
+        </ZFormItem>
+        <ZFormItem label="请求头值" required>
+          <ZInput v-model="form.headerValue" type="password" autocomplete="new-password" :disabled="disabled" aria-label="请求头值" />
+        </ZFormItem>
       </div>
     </template>
     <SourceCredentialPicker
diff --git a/frontend/src/views/plugins/components/PluginEnableModal.vue b/frontend/src/views/plugins/components/PluginEnableModal.vue
index f977d13f1..77c103ddb 100644
--- a/frontend/src/views/plugins/components/PluginEnableModal.vue
+++ b/frontend/src/views/plugins/components/PluginEnableModal.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { JsonSchema } from '../utils/model'
 import type { ConfigurePluginInstanceRequest, PluginArtifactMetadata, PluginInstance } from '@/api'
-import { BaseButton, BaseModal, BaseTag } from '@codex-proxy/ui'
+import { ZButton, ZDialog, ZTag } from '@codex-proxy/ui'
 import { computed } from 'vue'
 import PluginConfigurationSummary from './PluginConfigurationSummary.vue'
 import PluginHelpPopover from './PluginHelpPopover.vue'
@@ -27,17 +27,17 @@ const parameters = computed(() => {
 </script>
 
 <template>
-  <BaseModal v-model="open" :title="replacements.length ? '切换启用配置' : '启用插件配置'" size="md" :dismissible="!saving">
+  <ZDialog v-model="open" :title="replacements.length ? '切换启用配置' : '启用插件配置'" width="36rem" :show-close="!saving" :close-on-click-modal="!saving" :close-on-press-escape="!saving">
     <div v-if="request" class="grid gap-4">
       <div class="grid gap-3 rounded-cp bg-cp-fill-alter p-4">
         <div class="flex min-w-0 flex-wrap items-center gap-2">
           <strong class="min-w-0 flex-1 wrap-anywhere text-cp-sm">{{ request.name }}</strong>
-          <BaseTag v-if="metadata">
+          <ZTag v-if="metadata">
             {{ metadata.version }}
-          </BaseTag>
-          <BaseTag type="primary">
+          </ZTag>
+          <ZTag type="primary">
             将启用
-          </BaseTag>
+          </ZTag>
         </div>
         <dl v-if="parameters.length" class="m-0 grid grid-cols-1 gap-3 text-cp-sm sm:grid-cols-2">
           <div v-for="parameter in parameters" :key="parameter.key" class="grid min-w-0 gap-1">
@@ -62,24 +62,24 @@ const parameters = computed(() => {
           <li v-for="instance in replacements" :key="instance.id" class="flex items-center gap-3 rounded-cp bg-cp-fill-alter p-3">
             <span class="min-w-0 flex-1 wrap-anywhere text-cp-sm font-emphasis">{{ instance.name }}</span>
             <div class="flex shrink-0 flex-wrap items-center justify-end gap-2">
-              <BaseTag v-if="instance.version">
+              <ZTag v-if="instance.version">
                 {{ instance.version }}
-              </BaseTag>
-              <BaseTag type="warning">
+              </ZTag>
+              <ZTag type="warning">
                 将停用
-              </BaseTag>
+              </ZTag>
             </div>
           </li>
         </ul>
       </div>
     </div>
     <template #footer>
-      <BaseButton variant="secondary" :disabled="saving" @click="open = false">
+      <ZButton :disabled="saving" @click="open = false">
         取消
-      </BaseButton>
-      <BaseButton variant="primary" :loading="saving" :disabled="!request" @click="$emit('confirm')">
+      </ZButton>
+      <ZButton type="primary" :loading="saving" :disabled="!request" @click="$emit('confirm')">
         {{ replacements.length ? '确认切换' : '确认启用' }}
-      </BaseButton>
+      </ZButton>
     </template>
-  </BaseModal>
+  </ZDialog>
 </template>
diff --git a/frontend/src/views/plugins/components/PluginExtensionsPanel.vue b/frontend/src/views/plugins/components/PluginExtensionsPanel.vue
index 7eb6dbae5..6d46e0598 100644
--- a/frontend/src/views/plugins/components/PluginExtensionsPanel.vue
+++ b/frontend/src/views/plugins/components/PluginExtensionsPanel.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { PluginManagementView } from '@/api'
 
-import { BaseButton, BaseEmpty, BaseTag } from '@codex-proxy/ui'
+import { ZButton, ZEmpty, ZTag } from '@codex-proxy/ui'
 import { Blocks, ExternalLink } from '@lucide/vue'
 import { computed } from 'vue'
 import { useRouter } from 'vue-router'
@@ -26,7 +26,7 @@ function openView(view: PluginManagementView) {
   <div class="flex h-full min-h-0 flex-col gap-4">
     <div v-if="loading && pageViews.length === 0" class="min-h-0 flex-1" aria-busy="true" />
 
-    <BaseEmpty
+    <ZEmpty
       v-else-if="pageViews.length === 0"
       class="flex-1 content-center"
       surface="none"
@@ -53,21 +53,21 @@ function openView(view: PluginManagementView) {
               配置 {{ shortPluginInstanceId(view.target.instanceId) }}
             </p>
           </div>
-          <BaseTag size="sm">
+          <ZTag size="small">
             {{ view.pages.length }} 页
-          </BaseTag>
+          </ZTag>
         </div>
 
         <p class="m-0 line-clamp-2 text-cp-sm leading-relaxed text-cp-text-secondary">
           {{ view.pages.map(page => page.title).join('、') }}
         </p>
 
-        <BaseButton class="mt-auto self-start" size="sm" variant="secondary" @click="openView(view)">
+        <ZButton class="mt-auto self-start" size="small" @click="openView(view)">
           <template #icon>
             <ExternalLink class="size-3.5" />
           </template>
           打开页面
-        </BaseButton>
+        </ZButton>
       </article>
     </div>
   </div>
diff --git a/frontend/src/views/plugins/components/PluginFrontendAuthenticationEditor.vue b/frontend/src/views/plugins/components/PluginFrontendAuthenticationEditor.vue
index 5a4af2c66..79255702f 100644
--- a/frontend/src/views/plugins/components/PluginFrontendAuthenticationEditor.vue
+++ b/frontend/src/views/plugins/components/PluginFrontendAuthenticationEditor.vue
@@ -7,7 +7,7 @@ import type {
   PluginFrontendIdentityBinding,
 } from '@/api'
 
-import { BaseButton, BaseFormItem, BaseIconButton, BaseInput, BaseSegmented, BaseSelect, BaseSwitch, toast } from '@codex-proxy/ui'
+import { ZButton, ZFormItem, ZIconButton, ZInput, ZNotification, ZSegmented, ZSelect, ZSwitch } from '@codex-proxy/ui'
 
 import { Plus, RefreshCw, Trash2 } from '@lucide/vue'
 import { computed, shallowRef, watch } from 'vue'
@@ -182,7 +182,7 @@ async function loadClientKeys() {
   catch (error: unknown) {
     if (!controller.signal.aborted) {
       keysFailed.value = true
-      toast.error(errorMessage(error, '加载客户端 Key 失败'))
+      ZNotification.error({ message: errorMessage(error, '加载客户端 Key 失败') })
     }
   }
   finally {
@@ -210,10 +210,9 @@ defineExpose({ validationError })
 <template>
   <div class="grid gap-4">
     <div class="flex items-center gap-2 rounded-cp-lg bg-cp-fill-alter p-4">
-      <BaseSwitch
+      <ZSwitch
         :model-value="Boolean(binding)"
         label="启用客户端认证"
-        show-label
         :disabled="disabled"
         @update:model-value="enableAuthentication"
       />
@@ -231,7 +230,7 @@ defineExpose({ validationError })
     </div>
 
     <template v-if="binding">
-      <BaseFormItem label="未匹配处理">
+      <ZFormItem label="未匹配处理">
         <template #label-extra>
           <PluginHelpPopover label="未匹配处理说明">
             <p class="m-0">
@@ -245,14 +244,14 @@ defineExpose({ validationError })
             </p>
           </PluginHelpPopover>
         </template>
-        <BaseSegmented
+        <ZSegmented
           :model-value="binding.failurePolicy"
           :options="fallbackOptions"
-          label="客户端认证未匹配处理"
+          aria-label="客户端认证未匹配处理"
           :disabled="disabled"
           @update:model-value="setFailurePolicy"
         />
-      </BaseFormItem>
+      </ZFormItem>
 
       <div class="grid gap-2">
         <div class="flex min-w-0 items-end justify-between gap-3">
@@ -270,12 +269,11 @@ defineExpose({ validationError })
             </PluginHelpPopover>
           </div>
           <div class="flex shrink-0 items-center gap-1">
-            <BaseIconButton v-if="keysFailed" size="sm" label="重新加载客户端 Key" :disabled="disabled" :loading="loadingKeys" @click="loadClientKeys()">
+            <ZIconButton v-if="keysFailed" size="small" aria-label="重新加载客户端 Key" :disabled="disabled" :loading="loadingKeys" @click="loadClientKeys()">
               <RefreshCw class="size-3.5" />
-            </BaseIconButton>
-            <BaseButton
-              size="sm"
-              variant="secondary"
+            </ZIconButton>
+            <ZButton
+              size="small"
               :disabled="disabled || binding.identityBindings.length >= 256"
               @click="addIdentity"
             >
@@ -283,7 +281,7 @@ defineExpose({ validationError })
                 <Plus class="size-3.5" />
               </template>
               添加映射
-            </BaseButton>
+            </ZButton>
           </div>
         </div>
 
@@ -292,17 +290,17 @@ defineExpose({ validationError })
           :key="index"
           class="grid min-w-0 gap-3 rounded-cp-lg bg-cp-fill-alter p-3 md:grid-cols-[minmax(0,1fr)_minmax(0,1fr)_auto] md:items-end"
         >
-          <BaseFormItem label="身份标识" required>
-            <BaseInput
+          <ZFormItem label="身份标识" required>
+            <ZInput
               :model-value="identity.principal"
               maxlength="256"
               placeholder="填写插件返回的身份标识"
               :disabled="disabled"
               @update:model-value="updateIdentity(index, { principal: $event })"
             />
-          </BaseFormItem>
-          <BaseFormItem label="客户端 Key" required>
-            <BaseSelect
+          </ZFormItem>
+          <ZFormItem label="客户端 Key" required>
+            <ZSelect
               :model-value="identity.clientKeyId"
               :options="keyOptions"
               :disabled="disabled || loadingKeys"
@@ -311,17 +309,16 @@ defineExpose({ validationError })
               class="w-full min-w-0"
               @update:model-value="updateIdentity(index, { clientKeyId: $event })"
             />
-          </BaseFormItem>
-          <BaseIconButton
-            size="md"
-            variant="ghost"
+          </ZFormItem>
+          <ZIconButton
+            size="default"
             :disabled="disabled"
-            :label="`移除第 ${index + 1} 条身份映射`"
+            :aria-label="`移除第 ${index + 1} 条身份映射`"
             class="justify-self-end"
             @click="removeIdentity(index)"
           >
             <Trash2 class="size-3.5" />
-          </BaseIconButton>
+          </ZIconButton>
         </div>
       </div>
     </template>
diff --git a/frontend/src/views/plugins/components/PluginHelpPopover.vue b/frontend/src/views/plugins/components/PluginHelpPopover.vue
index 0e5847b16..b5a791b8b 100644
--- a/frontend/src/views/plugins/components/PluginHelpPopover.vue
+++ b/frontend/src/views/plugins/components/PluginHelpPopover.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { BaseIconButton, BasePopover } from '@codex-proxy/ui'
+import { ZIconButton, ZPopover } from '@codex-proxy/ui'
 import { CircleAlert, Info, TriangleAlert } from '@lucide/vue'
 import { shallowRef, useId } from 'vue'
 
@@ -19,11 +19,11 @@ function handleKeydown(event: KeyboardEvent) {
 </script>
 
 <template>
-  <BasePopover v-model="open" trigger="hover-click" placement="top-start" :hover-delay="240" class="shrink-0">
-    <template #trigger>
-      <BaseIconButton
-        :label="label"
-        size="sm"
+  <ZPopover v-model="open" trigger="hover-click" placement="top-start" :hover-delay="240" class="shrink-0">
+    <template #reference>
+      <ZIconButton
+        :aria-label="label"
+        size="small"
         class="size-5!"
         :title="undefined"
         :aria-expanded="open"
@@ -33,10 +33,10 @@ function handleKeydown(event: KeyboardEvent) {
         <CircleAlert v-if="tone === 'error'" class="size-4 text-cp-error-text" />
         <TriangleAlert v-else-if="tone === 'warning'" class="size-4 text-cp-warning" />
         <Info v-else class="size-3.5" />
-      </BaseIconButton>
+      </ZIconButton>
     </template>
-    <div :id="descriptionId" role="tooltip" class="grid max-w-80 gap-2 p-3 text-cp-xs leading-relaxed break-words text-cp-text-secondary">
+    <div :id="descriptionId" role="tooltip" class="grid max-w-80 gap-2 p-3 text-cp-xs leading-relaxed wrap-break-word text-cp-text-secondary">
       <slot />
     </div>
-  </BasePopover>
+  </ZPopover>
 </template>
diff --git a/frontend/src/views/plugins/components/PluginInstallModal.vue b/frontend/src/views/plugins/components/PluginInstallModal.vue
index 0540e8b48..e35fc38c1 100644
--- a/frontend/src/views/plugins/components/PluginInstallModal.vue
+++ b/frontend/src/views/plugins/components/PluginInstallModal.vue
@@ -13,7 +13,7 @@ import type {
 } from '@/api'
 
 import { Github } from '@boxicons/vue'
-import { BaseButton, BaseCheckbox, BaseForm, BaseFormItem, BaseInput, BaseModal, BaseSegmented, BaseTag, toast } from '@codex-proxy/ui'
+import { ZButton, ZCheckbox, ZDialog, ZForm, ZFormItem, ZInput, ZNotification, ZSegmented, ZTag } from '@codex-proxy/ui'
 
 import { CheckCircle2, Download, FileArchive, Link, PackageOpen } from '@lucide/vue'
 import { useEventListener, useSessionStorage } from '@vueuse/core'
@@ -302,7 +302,7 @@ useEventListener('pagehide', () => {
 function chooseFile(event: Event) {
   const file = (event.target as HTMLInputElement).files?.[0] ?? null
   if (file && file.size > 32 * 1024 * 1024) {
-    toast.warning('插件包不能超过 32 MiB')
+    ZNotification.warning({ message: '插件包不能超过 32 MiB' })
     uploadFile.value = null
     ;(event.target as HTMLInputElement).value = ''
     return
@@ -316,7 +316,7 @@ function installSelected() {
     return
   }
   if (!selection.value || !verified.value) {
-    toast.warning('请先校验当前选择的插件包')
+    ZNotification.warning({ message: '请先校验当前选择的插件包' })
     return
   }
   emit('install', selection.value)
@@ -332,11 +332,11 @@ async function queryRelease() {
   const repository = githubRepository()
   const tag = githubForm.tag.trim()
   if (!/^[-\w.]+\/[-\w.]+$/.test(repository)) {
-    toast.warning('请输入 GitHub 仓库链接或 owner/repo')
+    ZNotification.warning({ message: '请输入 GitHub 仓库链接或 owner/repo' })
     return
   }
   if (githubForm.allowPrerelease && !tag) {
-    toast.warning('查询预发行版需要明确填写 tag')
+    ZNotification.warning({ message: '查询预发行版需要明确填写 tag' })
     return
   }
   submitting.value = true
@@ -415,25 +415,25 @@ watch(
 </script>
 
 <template>
-  <BaseModal
+  <ZDialog
     v-model="open"
     :title="updateSource ? '更新插件' : '安装插件'"
     :description="acceptanceArtifact ? '确认来源与版本后安装' : updateSource ? '检查设置兼容性后切换版本' : '支持本地插件包、URL 与 GitHub'"
-    size="md"
-    :dismissible="!busy"
-    @after-leave="clearCredentials"
+    width="36rem"
+    :show-close="!busy" :close-on-click-modal="!busy" :close-on-press-escape="!busy"
+    @closed="clearCredentials"
   >
-    <BaseSegmented
+    <ZSegmented
       v-if="!acceptanceArtifact && !verified"
       :model-value="mode"
       :options="modeOptions"
       :disabled="busy"
-      label="安装方式"
+      aria-label="安装方式"
       class="mb-5 w-full"
       @update:model-value="changeMode"
     />
-    <BaseForm v-if="!verified && mode === 'upload'">
-      <BaseFormItem label="插件包" required>
+    <ZForm v-if="!verified && mode === 'upload'">
+      <ZFormItem label="插件包" required>
         <!-- 原生文件输入放在样式化上传区内，保留键盘与读屏语义。 -->
         <!-- eslint-disable-next-line vue-a11y/label-has-for -->
         <label
@@ -454,38 +454,38 @@ watch(
             @change="chooseFile"
           >
         </label>
-      </BaseFormItem>
-    </BaseForm>
+      </ZFormItem>
+    </ZForm>
 
-    <BaseForm v-else-if="!verified && mode === 'url'" class="grid gap-4">
-      <BaseFormItem label="下载 URL" required>
+    <ZForm v-else-if="!verified && mode === 'url'" class="grid gap-4">
+      <ZFormItem label="下载 URL" required>
         <template #label-extra>
           <PluginHelpPopover label="下载地址说明">
             仅支持 HTTPS，本机回环地址可使用 HTTP
           </PluginHelpPopover>
         </template>
-        <BaseInput v-model="urlForm.url" :disabled="busy" aria-label="下载 URL" placeholder="https://downloads.example.org/plugin.tar.gz" />
-      </BaseFormItem>
-    </BaseForm>
+        <ZInput v-model="urlForm.url" :disabled="busy" aria-label="下载 URL" placeholder="https://downloads.example.org/plugin.tar.gz" />
+      </ZFormItem>
+    </ZForm>
 
-    <BaseForm v-else-if="!verified" class="grid gap-4">
-      <BaseFormItem label="GitHub 仓库" required>
-        <BaseInput v-model="githubForm.repository" :disabled="busy" aria-label="GitHub 仓库" placeholder="仓库链接或 owner/repo">
+    <ZForm v-else-if="!verified" class="grid gap-4">
+      <ZFormItem label="GitHub 仓库" required>
+        <ZInput v-model="githubForm.repository" :disabled="busy" aria-label="GitHub 仓库" placeholder="仓库链接或 owner/repo">
           <template #prefix>
             <Github class="size-4" />
           </template>
-        </BaseInput>
-      </BaseFormItem>
-      <BaseFormItem label="版本标签">
+        </ZInput>
+      </ZFormItem>
+      <ZFormItem label="版本标签">
         <template #label-extra>
           <PluginHelpPopover label="版本标签说明">
             留空查询最新稳定版，查询预发行版时必须指定标签
           </PluginHelpPopover>
         </template>
-        <BaseInput v-model="githubForm.tag" :disabled="busy" aria-label="版本标签" placeholder="留空查最新稳定版" />
-      </BaseFormItem>
-      <BaseCheckbox v-model="githubForm.allowPrerelease" label="允许查询预发行版" show-label :disabled="busy" />
-    </BaseForm>
+        <ZInput v-model="githubForm.tag" :disabled="busy" aria-label="版本标签" placeholder="留空查最新稳定版" />
+      </ZFormItem>
+      <ZCheckbox v-model="githubForm.allowPrerelease" label="允许查询预发行版" :disabled="busy" />
+    </ZForm>
 
     <div v-if="!verified && mode !== 'upload'" class="mt-4 grid gap-4">
       <PluginDownloadAuthentication
@@ -500,14 +500,14 @@ watch(
         @delete-credential="$emit('deleteCredential', $event)"
       />
       <div class="grid items-end gap-4 sm:grid-cols-2">
-        <BaseFormItem label="校验摘要">
+        <ZFormItem label="校验摘要">
           <template #label-extra>
             <PluginHelpPopover label="校验摘要说明">
               可选，填写发布者提供的 64 位 SHA-256 十六进制摘要，用于核对下载内容
             </PluginHelpPopover>
           </template>
-          <BaseInput v-model="connectionForm.sha256" :disabled="busy" :aria-invalid="Boolean(digestError)" maxlength="64" aria-label="SHA-256 校验摘要" placeholder="可选，SHA-256" class="font-mono [&_input::placeholder]:font-normal" />
-        </BaseFormItem>
+          <ZInput v-model="connectionForm.sha256" :disabled="busy" :aria-invalid="Boolean(digestError)" maxlength="64" aria-label="SHA-256 校验摘要" placeholder="可选，SHA-256" class="font-mono [&_input::placeholder]:font-normal" />
+        </ZFormItem>
         <PluginSourceProxyField v-model="connectionForm.outboundProxyId" :disabled="busy" />
       </div>
     </div>
@@ -516,13 +516,13 @@ watch(
       <div class="flex min-w-0 flex-wrap items-center gap-2">
         <span class="text-cp-sm text-cp-text-secondary">已找到版本</span>
         <strong class="min-w-0 wrap-break-word text-cp-sm font-emphasis text-cp-text">{{ release.tag }}</strong>
-        <BaseTag v-if="release.prerelease" type="warning">
+        <ZTag v-if="release.prerelease" type="warning">
           预发行版
-        </BaseTag>
+        </ZTag>
       </div>
-      <BaseFormItem v-if="releaseAssets.length > 1" label="插件包" required>
+      <ZFormItem v-if="releaseAssets.length > 1" label="插件包" required>
         <PluginAssetPicker v-model="githubForm.asset" :assets="releaseAssets" :disabled="busy" />
-      </BaseFormItem>
+      </ZFormItem>
       <p v-else class="m-0 break-all text-cp-sm text-cp-text-secondary">
         {{ githubForm.asset || '此版本没有 tar.gz 或 tgz 插件包' }}
       </p>
@@ -538,7 +538,7 @@ watch(
             <h3 class="m-0 min-w-0 wrap-break-word text-cp-sm font-emphasis text-cp-text">
               {{ verified.metadata.displayName }}
             </h3>
-            <BaseTag>{{ verified.metadata.version }}</BaseTag>
+            <ZTag>{{ verified.metadata.version }}</ZTag>
             <span role="status" class="ml-auto inline-flex shrink-0 items-center gap-1 text-cp-xs text-cp-success-text">
               <CheckCircle2 class="size-3.5" aria-hidden="true" />
               解析完成
@@ -560,9 +560,9 @@ watch(
           适用平台
         </dt>
         <dd class="m-0 flex min-w-0 flex-wrap gap-1.5">
-          <BaseTag v-for="platform in verified.metadata.platforms" :key="platform" size="sm">
+          <ZTag v-for="platform in verified.metadata.platforms" :key="platform" size="small">
             {{ platform }}
-          </BaseTag>
+          </ZTag>
         </dd>
       </dl>
       <p class="mt-4 mb-0 text-cp-xs leading-relaxed text-cp-text-secondary">
@@ -577,33 +577,33 @@ watch(
     </section>
 
     <template #footer>
-      <BaseButton v-if="verified && !acceptanceArtifact" variant="ghost" :disabled="busy" class="mr-auto" @click="$emit('resetVerification')">
+      <ZButton v-if="verified && !acceptanceArtifact" variant="text" :disabled="busy" class="mr-auto" @click="$emit('resetVerification')">
         返回
-      </BaseButton>
-      <BaseButton v-if="!verified && mode === 'github' && release" variant="secondary" :disabled="busy || authenticationIncomplete" @click="queryRelease">
+      </ZButton>
+      <ZButton v-if="!verified && mode === 'github' && release" :disabled="busy || authenticationIncomplete" @click="queryRelease">
         重新查询
-      </BaseButton>
-      <BaseButton variant="secondary" :disabled="busy" @click="open = false">
+      </ZButton>
+      <ZButton :disabled="busy" @click="open = false">
         取消
-      </BaseButton>
-      <BaseButton v-if="mode === 'github' && !release" variant="primary" :loading="submitting || querying" :disabled="busy || authenticationIncomplete || !githubForm.repository.trim()" @click="queryRelease">
+      </ZButton>
+      <ZButton v-if="mode === 'github' && !release" type="primary" :loading="submitting || querying" :disabled="busy || authenticationIncomplete || !githubForm.repository.trim()" @click="queryRelease">
         {{ querying ? '正在查询版本' : sourceChanged ? '保存来源并继续' : '下一步' }}
-      </BaseButton>
-      <BaseButton
+      </ZButton>
+      <ZButton
         v-else-if="!verified"
-        variant="primary"
+        type="primary"
         :loading="submitting || verifying"
         :disabled="!selection || busy || authenticationIncomplete"
         @click="verifySelected"
       >
         {{ verifying ? '正在解析插件包' : sourceChanged ? '保存来源并继续' : '下一步' }}
-      </BaseButton>
-      <BaseButton v-if="verified" variant="primary" :loading="saving" :disabled="busy || pendingAuthentication" @click="installSelected">
+      </ZButton>
+      <ZButton v-if="verified" type="primary" :loading="saving" :disabled="busy || pendingAuthentication" @click="installSelected">
         <template #icon>
           <Download class="size-4" />
         </template>
         {{ installationLabel }}
-      </BaseButton>
+      </ZButton>
     </template>
-  </BaseModal>
+  </ZDialog>
 </template>
diff --git a/frontend/src/views/plugins/components/PluginLegacyConfigurations.vue b/frontend/src/views/plugins/components/PluginLegacyConfigurations.vue
index e0eec307d..6121b30f1 100644
--- a/frontend/src/views/plugins/components/PluginLegacyConfigurations.vue
+++ b/frontend/src/views/plugins/components/PluginLegacyConfigurations.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { PluginArtifact, PluginInstance } from '@/api'
-import { BaseIconButton, BaseTag } from '@codex-proxy/ui'
+import { ZIconButton, ZTag } from '@codex-proxy/ui'
 import { Play, Power, Settings2, Trash2 } from '@lucide/vue'
 import { PLUGIN_STATUS_LABELS } from '../constants'
 import { configurationStatus, pluginStatusType } from '../utils/catalog'
@@ -29,26 +29,26 @@ defineEmits<{
     </p>
     <div v-for="instance in instances" :key="instance.id" class="mt-2 flex flex-wrap items-center gap-2 rounded-cp bg-cp-fill-alter p-3">
       <span class="min-w-0 flex-1 wrap-anywhere text-cp-sm">{{ instance.name }}</span>
-      <BaseTag size="sm">
+      <ZTag size="small">
         {{ artifactForInstance(instance, artifacts)?.metadata.version }}
-      </BaseTag>
+      </ZTag>
       <PluginStatusNotice :instance="instance" />
-      <BaseTag size="sm" :type="pluginStatusType(configurationStatus(instance))">
+      <ZTag size="small" :type="pluginStatusType(configurationStatus(instance))">
         {{ PLUGIN_STATUS_LABELS[configurationStatus(instance)] }}
-      </BaseTag>
+      </ZTag>
       <div class="flex shrink-0 items-center gap-1">
-        <BaseIconButton label="设置" variant="secondary" size="sm" :disabled="busy" @click="$emit('edit', instance)">
+        <ZIconButton aria-label="设置" variant="solid" size="small" :disabled="busy" @click="$emit('edit', instance)">
           <Settings2 class="size-4" />
-        </BaseIconButton>
-        <BaseIconButton v-if="instance.enabled" label="停用历史配置" variant="secondary" size="sm" :disabled="busy" @click="$emit('disable', instance)">
+        </ZIconButton>
+        <ZIconButton v-if="instance.enabled" aria-label="停用历史配置" variant="solid" size="small" :disabled="busy" @click="$emit('disable', instance)">
           <Power class="size-4" />
-        </BaseIconButton>
-        <BaseIconButton v-else label="启动" size="sm" variant="secondary" :disabled="busy || Boolean(instance.loadError)" @click="$emit('enable', instance)">
+        </ZIconButton>
+        <ZIconButton v-else aria-label="启动" size="small" variant="solid" :disabled="busy || Boolean(instance.loadError)" @click="$emit('enable', instance)">
           <Play class="size-4" />
-        </BaseIconButton>
-        <BaseIconButton v-if="!instance.enabled" label="删除历史配置" variant="secondary" size="sm" class="group" :disabled="busy" @click="$emit('delete', instance)">
+        </ZIconButton>
+        <ZIconButton v-if="!instance.enabled" aria-label="删除历史配置" variant="solid" size="small" class="group" :disabled="busy" @click="$emit('delete', instance)">
           <Trash2 class="size-4 text-cp-error-text group-disabled:text-cp-text-disabled" />
-        </BaseIconButton>
+        </ZIconButton>
       </div>
     </div>
   </details>
diff --git a/frontend/src/views/plugins/components/PluginManagement.vue b/frontend/src/views/plugins/components/PluginManagement.vue
index cd5ab8d1b..fd6c5e3c6 100644
--- a/frontend/src/views/plugins/components/PluginManagement.vue
+++ b/frontend/src/views/plugins/components/PluginManagement.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ArrowInDownSquareHalf } from '@boxicons/vue'
-import { BaseCheckbox, BaseConfirmModal, BaseIconButton, BasePageHeader, BaseScrollbar, BaseSegmented } from '@codex-proxy/ui'
+import { ZCheckbox, ZConfirmDialog, ZIconButton, ZPageHeader, ZScrollbar, ZSegmented } from '@codex-proxy/ui'
 
 import { PackageOpen, PanelsTopLeft, RefreshCw } from '@lucide/vue'
 import { shallowRef } from 'vue'
@@ -26,27 +26,27 @@ const tabOptions = [
 
 <template>
   <div class="flex h-[calc(100dvh-2rem)] min-h-0 w-full flex-none! flex-col gap-3 overflow-hidden min-[961px]:h-[calc(100dvh-3rem)]">
-    <BasePageHeader title="插件管理" description="管理插件、版本和扩展页面" />
+    <ZPageHeader title="插件管理" description="管理插件、版本和扩展页面" />
 
     <div class="flex shrink-0 items-start gap-3">
-      <BaseScrollbar horizontal :vertical="false" height="var(--cp-control-height)" class="min-w-0">
-        <BaseSegmented
+      <ZScrollbar horizontal :vertical="false" height="var(--cp-control-height)" class="min-w-0">
+        <ZSegmented
           v-model="activeTab"
           :options="tabOptions"
-          label="插件管理分区"
+          aria-label="插件管理分区"
           class="w-44"
         />
-      </BaseScrollbar>
+      </ZScrollbar>
       <div class="flex shrink-0 items-center gap-1">
-        <BaseIconButton label="安装插件" variant="secondary" @click="management.openInstall('upload')">
+        <ZIconButton aria-label="安装插件" variant="solid" @click="management.openInstall('upload')">
           <ArrowInDownSquareHalf pack="filled" class="size-5" />
-        </BaseIconButton>
-        <BaseIconButton label="刷新插件" variant="secondary" :loading="management.loading.value" @click="management.refresh()">
+        </ZIconButton>
+        <ZIconButton aria-label="刷新插件" variant="solid" :loading="management.loading.value" @click="management.refresh()">
           <template #loading>
             <RefreshCw class="size-4.5 animate-spin motion-reduce:animate-none" />
           </template>
           <RefreshCw class="size-4.5" />
-        </BaseIconButton>
+        </ZIconButton>
       </div>
     </div>
 
@@ -132,7 +132,7 @@ const tabOptions = [
       @save="management.saveInstance"
     />
 
-    <BaseConfirmModal
+    <ZConfirmDialog
       v-model="management.showVersionSwitch.value"
       title="切换插件版本"
       description="切换前会检查目标版本设置，失败时保留当前版本"
@@ -144,7 +144,7 @@ const tabOptions = [
         {{ management.pendingVersionSwitch.value?.artifact.metadata.displayName }}：
         {{ management.pendingVersionSwitch.value?.currentVersion }} → {{ management.pendingVersionSwitch.value?.artifact.metadata.version }}
       </p>
-    </BaseConfirmModal>
+    </ZConfirmDialog>
 
     <PluginRollbackModal
       v-model="management.showRollback.value"
@@ -165,7 +165,7 @@ const tabOptions = [
       @confirm="management.confirmInstanceEnable"
     />
 
-    <BaseConfirmModal
+    <ZConfirmDialog
       v-model="management.showArtifactDelete.value"
       title="删除插件版本"
       description="使用中的版本不可删除，删除版本也会清除对应的恢复设置"
@@ -196,9 +196,9 @@ const tabOptions = [
       <p class="mt-3 mb-0 text-cp-xs font-normal text-cp-text-secondary">
         同时清理独用下载认证，最后一版还会清理来源
       </p>
-    </BaseConfirmModal>
+    </ZConfirmDialog>
 
-    <BaseConfirmModal
+    <ZConfirmDialog
       v-model="management.showInstanceDelete.value"
       title="删除插件配置"
       description="配置、密钥与私有数据将永久删除"
@@ -215,9 +215,9 @@ const tabOptions = [
           无法恢复，已安装版本与其他配置不受影响
         </p>
       </div>
-    </BaseConfirmModal>
+    </ZConfirmDialog>
 
-    <BaseConfirmModal
+    <ZConfirmDialog
       v-model="management.uninstall.open.value"
       title="卸载插件"
       description="删除全部版本、配置、密钥与私有数据"
@@ -247,14 +247,14 @@ const tabOptions = [
             </p>
           </PluginHelpPopover>
         </div>
-        <BaseCheckbox v-model="management.uninstall.acknowledged.value" label="确认永久删除，无法恢复" show-label :disabled="management.uninstall.busy.value" />
+        <ZCheckbox v-model="management.uninstall.acknowledged.value" label="确认永久删除，无法恢复" :disabled="management.uninstall.busy.value" />
         <p v-if="management.uninstall.progress.value" role="status" class="m-0 text-cp-xs text-cp-text-secondary">
           {{ management.uninstall.progress.value }}
         </p>
       </div>
-    </BaseConfirmModal>
+    </ZConfirmDialog>
 
-    <BaseConfirmModal
+    <ZConfirmDialog
       v-model="management.showCredentialDelete.value"
       title="删除下载认证"
       description="仍被使用时不可删除，删除后无法恢复"
@@ -266,6 +266,6 @@ const tabOptions = [
       <p class="m-0 wrap-anywhere text-cp-sm font-normal">
         {{ management.pendingCredential.value?.name }}
       </p>
-    </BaseConfirmModal>
+    </ZConfirmDialog>
   </div>
 </template>
diff --git a/frontend/src/views/plugins/components/PluginManagementFrame.vue b/frontend/src/views/plugins/components/PluginManagementFrame.vue
index cb8a1c041..193de88d0 100644
--- a/frontend/src/views/plugins/components/PluginManagementFrame.vue
+++ b/frontend/src/views/plugins/components/PluginManagementFrame.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { PluginManagementPage, PluginManagementRoute, PluginManagementView } from '@/api'
 
-import { BaseButton } from '@codex-proxy/ui'
+import { ZButton } from '@codex-proxy/ui'
 import { RotateCw } from '@lucide/vue'
 import { useEventListener, useResizeObserver } from '@vueuse/core'
 
@@ -715,12 +715,12 @@ onScopeDispose(() => {
         <p class="m-0 text-xs leading-relaxed text-cp-text-secondary">
           {{ loadError }}
         </p>
-        <BaseButton size="sm" variant="secondary" @click="loadPage">
+        <ZButton size="small" @click="loadPage">
           <template #icon>
             <RotateCw class="size-3.5" />
           </template>
           重试
-        </BaseButton>
+        </ZButton>
       </div>
     </div>
     <iframe
diff --git a/frontend/src/views/plugins/components/PluginPage.vue b/frontend/src/views/plugins/components/PluginPage.vue
index e4eaa9544..2e70f27bd 100644
--- a/frontend/src/views/plugins/components/PluginPage.vue
+++ b/frontend/src/views/plugins/components/PluginPage.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { BaseButton, BaseEmpty, BaseIconButton, BasePageHeader, BaseSegmented } from '@codex-proxy/ui'
+import { ZButton, ZEmpty, ZIconButton, ZPageHeader, ZSegmented } from '@codex-proxy/ui'
 import { Blocks, CircleAlert, RefreshCw } from '@lucide/vue'
 import { storeToRefs } from 'pinia'
 import { computed, onMounted, shallowRef } from 'vue'
@@ -62,23 +62,23 @@ onMounted(() => {
 
 <template>
   <div class="flex min-w-0 w-full flex-col gap-5">
-    <BasePageHeader
+    <ZPageHeader
       :title="page?.title ?? '插件页面'"
       :description="page?.description || (view ? `使用插件提供的功能，当前配置为「${view.name}」` : '加载已启用插件的管理页面')"
     >
       <template #actions>
-        <BaseIconButton label="刷新页面" variant="secondary" :loading="loading" @click="refreshDirectory">
+        <ZIconButton aria-label="刷新页面" variant="solid" :loading="loading" @click="refreshDirectory">
           <template #loading>
             <RefreshCw class="size-4 animate-spin motion-reduce:animate-none" />
           </template>
           <RefreshCw class="size-4" />
-        </BaseIconButton>
+        </ZIconButton>
       </template>
-    </BasePageHeader>
+    </ZPageHeader>
 
     <PluginPageLoading v-if="loading && !loaded" />
 
-    <BaseEmpty
+    <ZEmpty
       v-else-if="!view || !page"
       class="min-h-0 flex-1 content-center"
       :icon="Blocks"
@@ -86,11 +86,11 @@ onMounted(() => {
       :description="loadError || '该配置或页面未发布，可能已停用或切换版本'"
     >
       <template #action>
-        <BaseButton variant="secondary" @click="router.push('/plugins')">
+        <ZButton @click="router.push('/plugins')">
           返回插件管理
-        </BaseButton>
+        </ZButton>
       </template>
-    </BaseEmpty>
+    </ZEmpty>
 
     <div
       v-else-if="loadError"
@@ -101,19 +101,19 @@ onMounted(() => {
       <p class="m-0 min-w-0 flex-1 text-cp-sm font-semibold">
         页面目录刷新失败，当前显示上次成功加载的版本：{{ loadError }}
       </p>
-      <BaseButton size="sm" variant="secondary" :loading="loading" @click="refreshDirectory">
+      <ZButton size="small" :loading="loading" @click="refreshDirectory">
         重试
-      </BaseButton>
+      </ZButton>
     </div>
 
     <section v-if="view && page" class="flex min-w-0 flex-col gap-4">
-      <BaseSegmented
+      <ZSegmented
         v-if="view.pages.length > 1"
         v-model="selectedPageId"
         class="w-max max-w-full shrink-0 overflow-x-auto"
         :options="pageOptions"
-        label="插件页面"
-        size="sm"
+        aria-label="插件页面"
+        size="small"
       />
       <PluginManagementFrame
         :key="frameKey"
diff --git a/frontend/src/views/plugins/components/PluginResourcePicker.vue b/frontend/src/views/plugins/components/PluginResourcePicker.vue
index 3a85f0db7..aa3b53547 100644
--- a/frontend/src/views/plugins/components/PluginResourcePicker.vue
+++ b/frontend/src/views/plugins/components/PluginResourcePicker.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { BaseButton, BaseEmpty, BaseSelect, toast } from '@codex-proxy/ui'
+import { ZButton, ZEmpty, ZNotification, ZSelect } from '@codex-proxy/ui'
 import { CircleAlert, LoaderCircle } from '@lucide/vue'
 import { computed, onScopeDispose, shallowRef, watch } from 'vue'
 import { getAccountGroups, getApiKeys } from '@/api'
@@ -57,8 +57,7 @@ async function load() {
     if (!current.signal.aborted) {
       error.value = errorMessage(cause)
       // 同一弹窗可能挂载多个范围选择器，只显示一份相同错误。
-      if (!toast.messages.some(message => message.type === 'error' && message.message === error.value))
-        toast.error(error.value)
+      ZNotification.error({ message: error.value, deduplicate: true })
     }
   }
   finally {
@@ -76,7 +75,7 @@ onScopeDispose(() => controller?.abort())
 </script>
 
 <template>
-  <BaseSelect
+  <ZSelect
     v-model="selected"
     :options="choices"
     multiple
@@ -91,26 +90,26 @@ onScopeDispose(() => controller?.abort())
     class="w-full min-w-0"
   >
     <template #empty="{ search }">
-      <BaseEmpty v-if="loading" title="正在加载…" size="sm" surface="none" role="status">
+      <ZEmpty v-if="loading" title="正在加载…" size="small" surface="none" role="status">
         <template #icon>
           <LoaderCircle :size="18" class="animate-spin text-cp-text-quaternary motion-reduce:animate-none" />
         </template>
-      </BaseEmpty>
-      <BaseEmpty v-else-if="error" title="加载失败" :description="`暂时无法获取${label}`" :icon="CircleAlert" size="sm" surface="none" role="alert">
+      </ZEmpty>
+      <ZEmpty v-else-if="error" title="加载失败" :description="`暂时无法获取${label}`" :icon="CircleAlert" size="small" surface="none" role="alert">
         <template #action>
-          <BaseButton size="sm" variant="secondary" :disabled="disabled" @click="load">
+          <ZButton size="small" :disabled="disabled" @click="load">
             重试
-          </BaseButton>
+          </ZButton>
         </template>
-      </BaseEmpty>
-      <BaseEmpty
+      </ZEmpty>
+      <ZEmpty
         v-else
         :title="search ? '没有匹配项' : `暂无${label}`"
         :description="search ? undefined : `请先在${kind === 'keys' ? 'API 密钥' : '分组管理'}中创建`"
-        size="sm"
+        size="small"
         surface="none"
         role="status"
       />
     </template>
-  </BaseSelect>
+  </ZSelect>
 </template>
diff --git a/frontend/src/views/plugins/components/PluginRollbackModal.vue b/frontend/src/views/plugins/components/PluginRollbackModal.vue
index de67d2df1..085a3ce56 100644
--- a/frontend/src/views/plugins/components/PluginRollbackModal.vue
+++ b/frontend/src/views/plugins/components/PluginRollbackModal.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { PluginInstance, PluginRollbackPlan } from '@/api'
 
-import { BaseButton, BaseForm, BaseFormItem, BaseModal, BaseSelect } from '@codex-proxy/ui'
+import { ZButton, ZDialog, ZForm, ZFormItem, ZSelect } from '@codex-proxy/ui'
 
 import { computed, shallowRef, watch } from 'vue'
 import { shortDigest } from '../utils/model'
@@ -34,14 +34,14 @@ watch(() => props.plan, () => {
 </script>
 
 <template>
-  <BaseModal v-model="open" title="回退插件版本" description="恢复对应版本的设置，保持当前启停状态" size="md" :dismissible="!saving">
-    <BaseForm class="grid gap-4">
-      <BaseFormItem label="当前版本">
+  <ZDialog v-model="open" title="回退插件版本" description="恢复对应版本的设置，保持当前启停状态" width="36rem" :show-close="!saving" :close-on-click-modal="!saving" :close-on-press-escape="!saving">
+    <ZForm class="grid gap-4">
+      <ZFormItem label="当前版本">
         <p class="m-0 break-all text-cp-sm text-cp-text">
           {{ instance?.name }} <span v-if="plan" class="font-mono">· {{ plan.currentVersion }}</span>
         </p>
-      </BaseFormItem>
-      <BaseFormItem v-if="loading || options.length" label="目标版本" required>
+      </ZFormItem>
+      <ZFormItem v-if="loading || options.length" label="目标版本" required>
         <template #label-extra>
           <PluginHelpPopover label="回退说明">
             <p class="m-0">
@@ -52,7 +52,7 @@ watch(() => props.plan, () => {
             </p>
           </PluginHelpPopover>
         </template>
-        <BaseSelect
+        <ZSelect
           v-model="selected"
           class="w-full"
           :options="options"
@@ -60,21 +60,21 @@ watch(() => props.plan, () => {
           :placeholder="loading ? '正在加载旧版' : '请选择回退目标'"
           aria-label="回退目标版本"
         />
-      </BaseFormItem>
+      </ZFormItem>
       <p v-else-if="plan" role="status" class="m-0 text-cp-sm text-cp-text-secondary">
         没有保留恢复设置的旧版，其他版本可在“版本”中切换
       </p>
-    </BaseForm>
+    </ZForm>
     <template #footer>
-      <BaseButton v-if="instance" variant="secondary" :disabled="saving" :loading="loading" @click="$emit('reload', instance)">
+      <ZButton v-if="instance" :disabled="saving" :loading="loading" @click="$emit('reload', instance)">
         重新加载
-      </BaseButton>
-      <BaseButton variant="secondary" :disabled="saving" @click="open = false">
+      </ZButton>
+      <ZButton :disabled="saving" @click="open = false">
         取消
-      </BaseButton>
-      <BaseButton variant="primary" :disabled="!canConfirm" :loading="saving" @click="$emit('confirm', selected)">
+      </ZButton>
+      <ZButton type="primary" :disabled="!canConfirm" :loading="saving" @click="$emit('confirm', selected)">
         确认回退
-      </BaseButton>
+      </ZButton>
     </template>
-  </BaseModal>
+  </ZDialog>
 </template>
diff --git a/frontend/src/views/plugins/components/PluginScopeInput.vue b/frontend/src/views/plugins/components/PluginScopeInput.vue
index cd7e1c00c..79547e683 100644
--- a/frontend/src/views/plugins/components/PluginScopeInput.vue
+++ b/frontend/src/views/plugins/components/PluginScopeInput.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { BaseFormItem, BaseTextarea } from '@codex-proxy/ui'
+import { ZFormItem, ZTextarea } from '@codex-proxy/ui'
 
 import { computed } from 'vue'
 
@@ -24,8 +24,8 @@ const text = computed({
 </script>
 
 <template>
-  <BaseFormItem :label="label" :description="description">
-    <BaseTextarea
+  <ZFormItem :label="label" :description="description">
+    <ZTextarea
       v-model="text"
       :rows="2"
       :disabled="disabled"
@@ -33,5 +33,5 @@ const text = computed({
       :aria-label="label"
       class="font-mono"
     />
-  </BaseFormItem>
+  </ZFormItem>
 </template>
diff --git a/frontend/src/views/plugins/components/PluginSourceProxyField.vue b/frontend/src/views/plugins/components/PluginSourceProxyField.vue
index 7d3c18b06..d32e32111 100644
--- a/frontend/src/views/plugins/components/PluginSourceProxyField.vue
+++ b/frontend/src/views/plugins/components/PluginSourceProxyField.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { BaseFormItem, BaseSelect } from '@codex-proxy/ui'
+import { ZFormItem, ZSelect } from '@codex-proxy/ui'
 
 import { computed } from 'vue'
 import { useProxyCatalog } from '@/composables/useProxyCatalog'
@@ -23,13 +23,13 @@ const options = computed(() => [
 </script>
 
 <template>
-  <BaseFormItem label="下载代理">
-    <BaseSelect
+  <ZFormItem label="下载代理">
+    <ZSelect
       v-model="proxyId"
       :options="options"
       :disabled="disabled || loading"
       class="w-full"
       aria-label="下载代理"
     />
-  </BaseFormItem>
+  </ZFormItem>
 </template>
diff --git a/frontend/src/views/plugins/components/PluginUpdateCheckModal.vue b/frontend/src/views/plugins/components/PluginUpdateCheckModal.vue
index 672b152d6..f449a1759 100644
--- a/frontend/src/views/plugins/components/PluginUpdateCheckModal.vue
+++ b/frontend/src/views/plugins/components/PluginUpdateCheckModal.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { PluginUpdateSelection } from '../composables/usePluginUpdateCheck'
 import type { InstalledPlugin } from '../utils/catalog'
-import { BaseButton, BaseModal, BaseTag } from '@codex-proxy/ui'
+import { ZButton, ZDialog, ZTag } from '@codex-proxy/ui'
 import { ArrowRight, Download, LoaderCircle } from '@lucide/vue'
 import { computed } from 'vue'
 import { isNewerPluginVersion } from '../utils/updates'
@@ -26,7 +26,7 @@ const status = computed(() => {
 </script>
 
 <template>
-  <BaseModal v-model="open" title="插件更新" :description="plugin?.artifact.metadata.displayName" size="md" :dismissible="!upgrading">
+  <ZDialog v-model="open" title="插件更新" :description="plugin?.artifact.metadata.displayName" width="36rem" :show-close="!upgrading" :close-on-click-modal="!upgrading" :close-on-press-escape="!upgrading">
     <div v-if="checking" role="status" class="flex items-center gap-2 py-4 text-cp-sm text-cp-text-secondary">
       <LoaderCircle class="size-4 animate-spin motion-reduce:animate-none" />
       正在检查版本并校验插件包
@@ -41,9 +41,9 @@ const status = computed(() => {
         <div class="grid min-w-0 gap-2">
           <div class="flex flex-wrap items-center gap-2 text-cp-xs text-cp-text-secondary">
             <span>{{ candidate ? '目标版本' : '发布标签' }}</span>
-            <BaseTag v-if="result.release?.prerelease" type="warning" size="sm">
+            <ZTag v-if="result.release?.prerelease" type="warning" size="small">
               预发行版
-            </BaseTag>
+            </ZTag>
           </div>
           <strong class="break-all font-mono text-cp font-emphasis" :class="newer ? 'text-cp-primary-text' : 'text-cp-text'">{{ candidate?.version ?? result.release?.tag }}</strong>
         </div>
@@ -60,18 +60,18 @@ const status = computed(() => {
       <span v-if="!canInstall" class="text-cp-xs text-cp-text-secondary">此发布没有 tar.gz 或 tgz 插件包</span>
     </div>
     <template #footer>
-      <BaseButton variant="secondary" :disabled="upgrading" @click="open = false">
+      <ZButton :disabled="upgrading" @click="open = false">
         {{ checking ? '取消' : '关闭' }}
-      </BaseButton>
-      <BaseButton v-if="result?.instance && result.request && newer" variant="primary" :loading="upgrading" :disabled="upgrading" @click="$emit('upgrade', result)">
+      </ZButton>
+      <ZButton v-if="result?.instance && result.request && newer" type="primary" :loading="upgrading" :disabled="upgrading" @click="$emit('upgrade', result)">
         <template #icon>
           <Download class="size-4" />
         </template>
         升级到 {{ candidate?.version }}
-      </BaseButton>
-      <BaseButton v-else-if="result && canInstall && (!candidate || (newer && !result.instance))" variant="primary" :disabled="upgrading" @click="$emit('install', result)">
+      </ZButton>
+      <ZButton v-else-if="result && canInstall && (!candidate || (newer && !result.instance))" type="primary" :disabled="upgrading" @click="$emit('install', result)">
         {{ candidate ? '继续安装' : '选择插件包' }}
-      </BaseButton>
+      </ZButton>
     </template>
-  </BaseModal>
+  </ZDialog>
 </template>
diff --git a/frontend/src/views/plugins/components/PluginVersionCard.vue b/frontend/src/views/plugins/components/PluginVersionCard.vue
index 7ffa0409a..173839d1b 100644
--- a/frontend/src/views/plugins/components/PluginVersionCard.vue
+++ b/frontend/src/views/plugins/components/PluginVersionCard.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { PluginArtifact, PluginInstance } from '@/api'
-import { BaseIconButton, BaseTag } from '@codex-proxy/ui'
+import { ZIconButton, ZTag } from '@codex-proxy/ui'
 import { ArrowDownToLine, ChevronDown, Play, Trash2 } from '@lucide/vue'
 import { computed, shallowRef, useId } from 'vue'
 import { PLUGIN_STATUS_LABELS } from '../constants'
@@ -29,11 +29,11 @@ const detailsId = useId()
   <article class="min-w-0 rounded-cp bg-cp-fill-alter" :class="isCurrent ? 'grid min-h-36 content-between gap-3 p-4' : 'flex flex-wrap items-center gap-2 px-3 py-2 sm:gap-3'">
     <div v-if="isCurrent && current" class="flex flex-wrap items-center gap-2">
       <strong class="min-w-0 flex-1 wrap-break-word text-cp-sm">当前版本</strong>
-      <BaseTag>{{ artifact.metadata.version }}</BaseTag>
+      <ZTag>{{ artifact.metadata.version }}</ZTag>
       <PluginStatusNotice :instance="current" />
-      <BaseTag :type="pluginStatusType(configurationStatus(current))">
+      <ZTag :type="pluginStatusType(configurationStatus(current))">
         {{ PLUGIN_STATUS_LABELS[configurationStatus(current)] }}
-      </BaseTag>
+      </ZTag>
     </div>
     <div class="flex min-w-0 items-center justify-between gap-3" :class="isCurrent ? 'flex-wrap py-1' : 'flex-1'">
       <div class="grid min-w-0 gap-1 sm:flex sm:flex-wrap sm:items-center sm:gap-x-3">
@@ -53,12 +53,12 @@ const detailsId = useId()
         <ChevronDown class="size-3.5 transition-transform motion-reduce:transition-none" :class="detailsOpen ? 'rotate-180' : undefined" aria-hidden="true" />
       </button>
     </div>
-    <BaseTag v-if="!artifact.acceptedAt" type="warning" size="sm">
+    <ZTag v-if="!artifact.acceptedAt" type="warning" size="small">
       待安装
-    </BaseTag>
-    <BaseTag v-else-if="!isCurrent && uses.length" size="sm">
+    </ZTag>
+    <ZTag v-else-if="!isCurrent && uses.length" size="small">
       历史配置
-    </BaseTag>
+    </ZTag>
     <dl v-show="detailsOpen" :id="detailsId" class="m-0 grid min-w-0 grid-cols-1 gap-x-8 gap-y-4 text-cp-xs text-cp-text-secondary sm:grid-cols-2" :class="!isCurrent ? 'order-last w-full pt-2' : undefined">
       <div class="grid min-w-0 content-start gap-1">
         <dt class="text-cp-sm font-emphasis text-cp-text">
@@ -86,18 +86,18 @@ const detailsId = useId()
       </div>
     </dl>
     <div class="flex shrink-0 items-center gap-1" :class="isCurrent ? 'justify-self-end' : undefined">
-      <BaseIconButton v-if="!isCurrent" :label="`${artifact.metadata.version} 版本详情`" variant="secondary" size="sm" :aria-expanded="detailsOpen" :aria-controls="detailsId" @click="detailsOpen = !detailsOpen">
+      <ZIconButton v-if="!isCurrent" :aria-label="`${artifact.metadata.version} 版本详情`" variant="solid" size="small" :aria-expanded="detailsOpen" :aria-controls="detailsId" @click="detailsOpen = !detailsOpen">
         <ChevronDown class="size-4 transition-transform motion-reduce:transition-none" :class="detailsOpen ? 'rotate-180' : undefined" />
-      </BaseIconButton>
-      <BaseIconButton v-if="!artifact.acceptedAt" :label="`安装 ${artifact.metadata.version}`" size="sm" variant="primary" :disabled="busy" @click="$emit('accept', artifact)">
+      </ZIconButton>
+      <ZIconButton v-if="!artifact.acceptedAt" :aria-label="`安装 ${artifact.metadata.version}`" size="small" type="primary" variant="solid" :disabled="busy" @click="$emit('accept', artifact)">
         <ArrowDownToLine class="size-4" />
-      </BaseIconButton>
-      <BaseIconButton v-else :label="`切换至 ${artifact.metadata.version}`" size="sm" variant="secondary" :disabled="busy || !current || isCurrent" @click="$emit('switchVersion', artifact)">
+      </ZIconButton>
+      <ZIconButton v-else :aria-label="`切换至 ${artifact.metadata.version}`" size="small" variant="solid" :disabled="busy || !current || isCurrent" @click="$emit('switchVersion', artifact)">
         <Play class="size-4" />
-      </BaseIconButton>
-      <BaseIconButton v-if="artifact.acceptedAt" :label="`删除版本 ${artifact.metadata.version}`" size="sm" variant="secondary" class="group" :disabled="busy || uses.length > 0 || artifact.source.kind === 'builtin'" @click="$emit('deleteVersion', artifact)">
+      </ZIconButton>
+      <ZIconButton v-if="artifact.acceptedAt" :aria-label="`删除版本 ${artifact.metadata.version}`" size="small" variant="solid" class="group" :disabled="busy || uses.length > 0 || artifact.source.kind === 'builtin'" @click="$emit('deleteVersion', artifact)">
         <Trash2 class="size-4 text-cp-error-text group-disabled:text-cp-text-disabled" />
-      </BaseIconButton>
+      </ZIconButton>
     </div>
   </article>
 </template>
diff --git a/frontend/src/views/plugins/components/SourceCredentialPicker.vue b/frontend/src/views/plugins/components/SourceCredentialPicker.vue
index 050e9fde8..56cd4ac2b 100644
--- a/frontend/src/views/plugins/components/SourceCredentialPicker.vue
+++ b/frontend/src/views/plugins/components/SourceCredentialPicker.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { PluginSourceCredential } from '@/api'
 
-import { BaseCheckbox, BaseIconButton } from '@codex-proxy/ui'
+import { ZCheckbox, ZIconButton } from '@codex-proxy/ui'
 import { Trash2 } from '@lucide/vue'
 
 withDefaults(defineProps<{
@@ -32,10 +32,10 @@ function toggle(id: string, checked: boolean) {
       class="flex min-w-0 items-center gap-3 rounded-cp bg-cp-fill-alter px-3 py-1.5"
       :class="disabled ? 'opacity-60' : undefined"
     >
-      <BaseCheckbox
+      <ZCheckbox
         :model-value="isSelected(credential.id)"
         :disabled="disabled"
-        :label="`选择下载认证 ${credential.name}`"
+        :aria-label="`选择下载认证 ${credential.name}`"
         @update:model-value="toggle(credential.id, $event)"
       />
       <span class="flex min-w-0 flex-1 items-center gap-3">
@@ -44,9 +44,9 @@ function toggle(id: string, checked: boolean) {
           {{ credential.origin }}{{ credential.pathPrefix }}
         </span>
       </span>
-      <BaseIconButton size="sm" :label="`删除下载认证 ${credential.name}`" :disabled="disabled" @click="$emit('delete', credential)">
+      <ZIconButton size="small" :aria-label="`删除下载认证 ${credential.name}`" :disabled="disabled" @click="$emit('delete', credential)">
         <Trash2 class="size-3.5 text-cp-error" />
-      </BaseIconButton>
+      </ZIconButton>
     </div>
   </div>
 </template>
diff --git a/frontend/src/views/plugins/composables/usePluginArtifactActions.ts b/frontend/src/views/plugins/composables/usePluginArtifactActions.ts
index 8ac2f2cfd..2312a51ff 100644
--- a/frontend/src/views/plugins/composables/usePluginArtifactActions.ts
+++ b/frontend/src/views/plugins/composables/usePluginArtifactActions.ts
@@ -1,6 +1,6 @@
 import type { PluginRefreshContext } from '../utils/actions'
 import type { PluginArtifact } from '@/api'
-import { toast } from '@codex-proxy/ui'
+import { ZNotification } from '@codex-proxy/ui'
 import { shallowRef } from 'vue'
 import { deletePluginArtifact } from '@/api'
 import { notifyPluginError } from '../utils/actions'
@@ -23,7 +23,7 @@ export function usePluginArtifactActions({ refresh }: PluginRefreshContext) {
     try {
       await deletePluginArtifact({ sha256: artifact.metadata.sha256 }, { silent: true })
       showArtifactDelete.value = false
-      toast.success('插件制品已删除')
+      ZNotification.success({ message: '插件制品已删除' })
       await refresh(true)
     }
     catch (error) {
diff --git a/frontend/src/views/plugins/composables/usePluginCredentials.ts b/frontend/src/views/plugins/composables/usePluginCredentials.ts
index 9c9668b55..1cfca365e 100644
--- a/frontend/src/views/plugins/composables/usePluginCredentials.ts
+++ b/frontend/src/views/plugins/composables/usePluginCredentials.ts
@@ -1,7 +1,7 @@
 import type { Ref } from 'vue'
 import type { PluginRefreshContext } from '../utils/actions'
 import type { CreatePluginSourceCredentialRequest, PluginSourceCredential } from '@/api'
-import { toast } from '@codex-proxy/ui'
+import { ZNotification } from '@codex-proxy/ui'
 import { shallowRef } from 'vue'
 import { createPluginSourceCredential, deletePluginSourceCredential } from '@/api'
 import { useAsyncAction } from '@/composables/useAsyncAction'
@@ -42,7 +42,7 @@ export function usePluginCredentials({ credentials, refresh }: CredentialContext
     try {
       await deletePluginSourceCredential({ id: credential.id }, { silent: true })
       showCredentialDelete.value = false
-      toast.success('来源凭据已删除')
+      ZNotification.success({ message: '来源凭据已删除' })
       await refresh(true)
     }
     catch (error) {
diff --git a/frontend/src/views/plugins/composables/usePluginInstallation.ts b/frontend/src/views/plugins/composables/usePluginInstallation.ts
index 18d3fcae9..0c6689752 100644
--- a/frontend/src/views/plugins/composables/usePluginInstallation.ts
+++ b/frontend/src/views/plugins/composables/usePluginInstallation.ts
@@ -2,7 +2,7 @@ import type { InstalledPlugin } from '../utils/catalog'
 import type { PluginInstallMode, PluginInstallSelection } from '../utils/model'
 import type { PluginUpdateSelection } from './usePluginUpdateCheck'
 import type { PluginArtifact, PluginArtifactMutationResponse, PluginInstance, PluginRelease, PluginUpdateSourceBinding, QueryPluginReleaseRequest, VerifiedPluginArtifact } from '@/api'
-import { toast } from '@codex-proxy/ui'
+import { ZNotification } from '@codex-proxy/ui'
 import { isEqual } from 'es-toolkit'
 import { onScopeDispose, shallowRef, watch } from 'vue'
 import { acceptPluginArtifact, getPluginUpdateSources, installRemotePlugin, queryPluginRelease, updatePluginSource, uploadPluginArtifact, verifyRemotePlugin, verifyUploadedPlugin } from '@/api'
@@ -57,7 +57,7 @@ export function usePluginInstallation({ onInstalled, onSourceSaved }: Installati
   function openVersionInstall(plugin: InstalledPlugin) {
     const source = plugin.source
     if (!source || source.source.kind === 'builtin') {
-      toast.warning('此插件没有可用的安装来源')
+      ZNotification.warning({ message: '此插件没有可用的安装来源' })
       return
     }
     openInstall(source.source.kind)
@@ -128,7 +128,7 @@ export function usePluginInstallation({ onInstalled, onSourceSaved }: Installati
   async function installArtifact(request: PluginInstallSelection) {
     const verified = verifiedArtifact.value
     if (!verified || verified.requestKey !== pluginInstallSelectionKey(request)) {
-      toast.warning('请先校验当前选择的插件包')
+      ZNotification.warning({ message: '请先校验当前选择的插件包' })
       return
     }
     const result = await action.run(async () => {
@@ -149,7 +149,7 @@ export function usePluginInstallation({ onInstalled, onSourceSaved }: Installati
     if (!result)
       return
     showInstall.value = false
-    toast.success(result.configurationRequired ? '插件已安装，请补充必要配置' : result.defaultInstanceId ? '插件已安装，正在准备' : '插件版本已安装')
+    ZNotification.success({ message: result.configurationRequired ? '插件已安装，请补充必要配置' : result.defaultInstanceId ? '插件已安装，正在准备' : '插件版本已安装' })
     await onInstalled(result)
   }
 
@@ -178,14 +178,14 @@ export function usePluginInstallation({ onInstalled, onSourceSaved }: Installati
 
   async function acceptArtifact(artifact: PluginArtifact) {
     if (acceptanceArtifact.value?.metadata.sha256 !== artifact.metadata.sha256) {
-      toast.warning('请选择待安装的插件版本')
+      ZNotification.warning({ message: '请选择待安装的插件版本' })
       return
     }
     const result = await action.run(() => acceptPluginArtifact({ sha256: artifact.metadata.sha256 }, { silent: true }))
     if (!result)
       return
     showInstall.value = false
-    toast.success(result.configurationRequired ? '插件已安装，请补充必要配置' : result.defaultInstanceId ? '插件已安装，正在准备' : '插件版本已安装')
+    ZNotification.success({ message: result.configurationRequired ? '插件已安装，请补充必要配置' : result.defaultInstanceId ? '插件已安装，正在准备' : '插件版本已安装' })
     await onInstalled(result)
   }
 
diff --git a/frontend/src/views/plugins/composables/usePluginInstances.ts b/frontend/src/views/plugins/composables/usePluginInstances.ts
index 0e0957bcb..9512b80df 100644
--- a/frontend/src/views/plugins/composables/usePluginInstances.ts
+++ b/frontend/src/views/plugins/composables/usePluginInstances.ts
@@ -1,7 +1,7 @@
 import type { Ref } from 'vue'
 import type { PluginRefreshContext } from '../utils/actions'
 import type { ConfigurePluginInstanceRequest, PluginArtifact, PluginInstance, PluginVersionPlan } from '@/api'
-import { toast } from '@codex-proxy/ui'
+import { ZNotification } from '@codex-proxy/ui'
 import { shallowRef } from 'vue'
 import { deletePluginInstance, disablePluginInstance, getPluginArtifacts, getPluginInstances, updatePluginInstance } from '@/api'
 import { useAsyncAction } from '@/composables/useAsyncAction'
@@ -86,7 +86,7 @@ export function usePluginInstances({ artifacts, refresh, onEdit, onSaved }: Inst
 
   async function requestInstanceEnable(instance: PluginInstance) {
     if (instance.loadError) {
-      toast.error(instance.loadError)
+      ZNotification.error({ message: instance.loadError })
       return
     }
     if ((instance.enabled && configurationStatus(instance) !== 'failed') || savingInstance.value || showEnableConfirmation.value)
@@ -141,7 +141,7 @@ export function usePluginInstances({ artifacts, refresh, onEdit, onSaved }: Inst
     await updatePluginInstance({ id: instanceId, instance: request }, { silent: true })
     showEnableConfirmation.value = false
     showInstance.value = false
-    toast.success(request.replaceInstances?.length ? '已切换当前配置' : request.enabled ? '插件设置已应用' : '设置已保存，插件保持停用')
+    ZNotification.success({ message: request.replaceInstances?.length ? '已切换当前配置' : request.enabled ? '插件设置已应用' : '设置已保存，插件保持停用' })
     await refresh(true)
     onSaved()
   }
@@ -152,7 +152,7 @@ export function usePluginInstances({ artifacts, refresh, onEdit, onSaved }: Inst
     busyInstanceId.value = instance.id
     try {
       await disablePluginInstance({ id: instance.id }, { silent: true })
-      toast.success('插件已停用')
+      ZNotification.success({ message: '插件已停用' })
       await refresh(true)
     }
     catch (error) {
@@ -176,7 +176,7 @@ export function usePluginInstances({ artifacts, refresh, onEdit, onSaved }: Inst
     try {
       await deletePluginInstance({ id: instance.id }, { silent: true })
       showInstanceDelete.value = false
-      toast.success('配置、密钥与私有数据已删除，无法恢复')
+      ZNotification.success({ message: '配置、密钥与私有数据已删除，无法恢复' })
       await refresh(true)
     }
     catch (error) {
diff --git a/frontend/src/views/plugins/composables/usePluginUninstall.ts b/frontend/src/views/plugins/composables/usePluginUninstall.ts
index a15dde5fa..3a78d65d4 100644
--- a/frontend/src/views/plugins/composables/usePluginUninstall.ts
+++ b/frontend/src/views/plugins/composables/usePluginUninstall.ts
@@ -1,5 +1,5 @@
 import type { InstalledPlugin } from '../utils/catalog'
-import { toast } from '@codex-proxy/ui'
+import { ZNotification } from '@codex-proxy/ui'
 import { shallowRef } from 'vue'
 import { deletePluginArtifact, deletePluginInstance, disablePluginInstance, getPluginArtifacts, getPluginInstances } from '@/api'
 import { notifyPluginError } from '../utils/actions'
@@ -52,7 +52,7 @@ export function usePluginUninstall(refresh: () => Promise<void>) {
       if ((await getPluginArtifacts(options)).some(artifact => artifact.metadata.pluginId === plugin.id))
         throw new Error('已删除确认范围，但还有新安装的版本，请关闭并重新确认剩余内容')
       open.value = false
-      toast.success('插件已卸载，相关数据与来源设置已清理')
+      ZNotification.success({ message: '插件已卸载，相关数据与来源设置已清理' })
       await refresh()
     }
     catch (cause) {
diff --git a/frontend/src/views/plugins/composables/usePluginVersions.ts b/frontend/src/views/plugins/composables/usePluginVersions.ts
index e933ad256..8210374a1 100644
--- a/frontend/src/views/plugins/composables/usePluginVersions.ts
+++ b/frontend/src/views/plugins/composables/usePluginVersions.ts
@@ -2,7 +2,7 @@ import type { Ref } from 'vue'
 import type { PluginRefreshContext } from '../utils/actions'
 import type { InstalledPlugin } from '../utils/catalog'
 import type { PluginArtifact, PluginInstance, PluginRollbackPlan, PluginVersionPlan } from '@/api'
-import { toast } from '@codex-proxy/ui'
+import { ZNotification } from '@codex-proxy/ui'
 import { onScopeDispose, shallowRef, watch } from 'vue'
 import { getPluginRollbackPlan, getPluginVersionPlan, rollbackPluginInstance, switchPluginVersion } from '@/api'
 import { ApiError } from '@/api/request'
@@ -52,7 +52,7 @@ export function usePluginVersions({ catalog, instances, busyInstanceId, refresh,
         target: { artifactSha256: artifact.metadata.sha256, expectedRevision: instance.revision },
       }, { silent: true })
       showVersionSwitch.value = false
-      toast.success(`已切换至 ${artifact.metadata.version}`)
+      ZNotification.success({ message: `已切换至 ${artifact.metadata.version}` })
       await refresh(true)
       onApplied()
     }
@@ -115,7 +115,7 @@ export function usePluginVersions({ catalog, instances, busyInstanceId, refresh,
     try {
       await rollbackPluginInstance({ id: instance.id, target: { artifactSha256, expectedRevision: plan.instanceRevision } }, { silent: true })
       showRollback.value = false
-      toast.success(`已回退至 ${target.version}，并恢复对应设置`)
+      ZNotification.success({ message: `已回退至 ${target.version}，并恢复对应设置` })
       await refresh(true)
     }
     catch (error) {
diff --git a/frontend/src/views/plugins/utils/actions.ts b/frontend/src/views/plugins/utils/actions.ts
index 176e5c000..c3f47538c 100644
--- a/frontend/src/views/plugins/utils/actions.ts
+++ b/frontend/src/views/plugins/utils/actions.ts
@@ -1,4 +1,4 @@
-import { toast } from '@codex-proxy/ui'
+import { ZNotification } from '@codex-proxy/ui'
 import { ApiError } from '@/api/request'
 import { errorMessage } from '@/utils/operation'
 
@@ -10,5 +10,5 @@ export interface PluginRefreshContext {
 export function notifyPluginError(title: string, error: unknown): void {
   if (error instanceof ApiError && error.kind === 'cancelled')
     return
-  toast.error(errorMessage(error, title))
+  ZNotification.error({ message: errorMessage(error, title) })
 }
diff --git a/frontend/src/views/plugins/utils/catalog.ts b/frontend/src/views/plugins/utils/catalog.ts
index f16611374..6da4a4197 100644
--- a/frontend/src/views/plugins/utils/catalog.ts
+++ b/frontend/src/views/plugins/utils/catalog.ts
@@ -61,7 +61,7 @@ export function pluginStatusType(status: PluginCatalogStatus) {
     return 'danger' as const
   if (status === 'pending' || status === 'unconfigured' || status === 'unaccepted')
     return 'warning' as const
-  return 'neutral' as const
+  return 'default' as const
 }
 
 export function currentPluginInstance(plugin: InstalledPlugin): PluginInstance | undefined {
diff --git a/frontend/src/views/proxies/components/ProxyAccountsModal.vue b/frontend/src/views/proxies/components/ProxyAccountsModal.vue
index 889be1a5c..f1133ffd1 100644
--- a/frontend/src/views/proxies/components/ProxyAccountsModal.vue
+++ b/frontend/src/views/proxies/components/ProxyAccountsModal.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { OutboundProxyAccount, OutboundProxyRecord } from '@/api'
-import { BaseConfirmModal, BaseIconButton, BaseInput, BaseModal, BaseTable, BaseTablePagination, defineTableColumns } from '@codex-proxy/ui'
+import { defineTableColumns, ZConfirmDialog, ZDialog, ZIconButton, ZInput, ZPagination, ZTable } from '@codex-proxy/ui'
 import { Search, Unlink } from '@lucide/vue'
 import { computed, shallowRef, watch } from 'vue'
 import AccountPlanBadge from '@/components/account/AccountPlanBadge.vue'
@@ -68,14 +68,14 @@ watch([open, () => props.proxy?.id], () => {
 </script>
 
 <template>
-  <BaseModal v-model="open" title="关联账号" :description="description" size="lg" :dismissible="!removing">
+  <ZDialog v-model="open" title="关联账号" :description="description" width="48rem" :show-close="!removing" :close-on-click-modal="!removing" :close-on-press-escape="!removing">
     <div class="flex min-h-0 flex-col">
-      <BaseInput v-model="search" class="mb-4 shrink-0 sm:w-80" :disabled="removing" aria-label="搜索关联账号" placeholder="搜索账号名称或邮箱...">
+      <ZInput v-model="search" class="mb-4 shrink-0 sm:w-80" :disabled="removing" aria-label="搜索关联账号" placeholder="搜索账号名称或邮箱...">
         <template #prefix>
           <Search class="size-4.5 text-cp-text-tertiary" />
         </template>
-      </BaseInput>
-      <BaseTable :key="proxy?.id" class="min-h-0 shrink-0 [--cp-table-row-height:64px]" :style="{ height: tableHeight }" :columns="columns" :rows="rows" :loading="loading" :empty-text="emptyText">
+      </ZInput>
+      <ZTable :key="proxy?.id" class="min-h-0 shrink-0 [--cp-table-row-height:64px]" :style="{ height: tableHeight }" :columns="columns" :data="rows" :loading="loading" :empty-text="emptyText">
         <template #identity="{ row }">
           <div class="flex min-w-0 items-center gap-3">
             <span class="inline-flex size-9 shrink-0 items-center justify-center rounded-lg text-cp font-extrabold" :class="row.avatarTone" aria-hidden="true">
@@ -104,23 +104,23 @@ watch([open, () => props.proxy?.id], () => {
           </div>
         </template>
         <template #actions="{ row }">
-          <BaseIconButton
-            size="sm"
-            label="从当前代理移除账号"
+          <ZIconButton
+            size="small"
+            aria-label="从当前代理移除账号"
             :disabled="removing"
             :loading="removing && pendingRemove?.id === row.id"
             @click="requestRemove(row)"
           >
             <Unlink class="size-3.5 text-cp-error" />
-          </BaseIconButton>
+          </ZIconButton>
         </template>
-      </BaseTable>
-      <BaseTablePagination :pagination="pagination" :loading="loading || removing" @page-change="setPage" @page-size-change="setPageSize" />
+      </ZTable>
+      <ZPagination v-bind="pagination" :disabled="loading || removing" @current-change="setPage" @size-change="setPageSize" />
     </div>
-  </BaseModal>
-  <BaseConfirmModal v-model="showRemove" title="移除关联账号" confirm-text="移除" :loading="removing" @confirm="confirmRemove">
+  </ZDialog>
+  <ZConfirmDialog v-model="showRemove" title="移除关联账号" confirm-text="移除" :loading="removing" @confirm="confirmRemove">
     <p class="m-0 wrap-break-word">
       将“{{ pendingRemove?.name }}”从“{{ removeProxyName }}”移除后，该账号将改为直连
     </p>
-  </BaseConfirmModal>
+  </ZConfirmDialog>
 </template>
diff --git a/frontend/src/views/proxies/components/ProxyFormModal.vue b/frontend/src/views/proxies/components/ProxyFormModal.vue
index d12925720..7dcca9b62 100644
--- a/frontend/src/views/proxies/components/ProxyFormModal.vue
+++ b/frontend/src/views/proxies/components/ProxyFormModal.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import type { OutboundProxyRecord, OutboundProxyTest, RequestLocation } from '@/api'
-import { BaseButton, BaseForm, BaseFormItem, BaseIconButton, BaseInput, BaseModal, BaseSwitch } from '@codex-proxy/ui'
-import { Eye, EyeOff, LocateFixed, Save, Wifi } from '@lucide/vue'
-import { computed, shallowRef, watch } from 'vue'
+import { ZButton, ZDialog, ZForm, ZFormItem, ZIconButton, ZInput, ZSwitch } from '@codex-proxy/ui'
+import { LocateFixed, Save, Wifi } from '@lucide/vue'
+import { computed } from 'vue'
 import RequestLocationFields from '@/components/RequestLocationFields.vue'
 
 const props = defineProps<{
@@ -30,47 +30,34 @@ const manualLocationWarning = computed(() => {
     return location.message
   return ''
 })
-const showSecret = shallowRef(false)
 const busy = computed(() => props.saving || props.testingConnection || props.detectingLocation)
 const title = computed(() => props.proxy ? '编辑代理' : '新增代理')
 const connectionDescription = computed(() => props.proxy
   ? '留空保留当前连接和认证信息，填写新地址时，请包含所需的用户名和密码'
   : '支持 HTTP、HTTPS、SOCKS5 和 SOCKS5H，可在地址中包含用户名和密码')
-
-watch(open, (value) => {
-  if (value)
-    showSecret.value = false
-})
 </script>
 
 <template>
-  <BaseModal v-model="open" :title="title" size="md" :dismissible="!busy">
-    <BaseForm class="grid gap-5">
-      <BaseFormItem label="代理名称" required>
-        <BaseInput v-model="name" maxlength="100" :disabled="busy" aria-label="代理名称" placeholder="请输入代理名称" />
-      </BaseFormItem>
-      <BaseFormItem label="代理地址" :required="!proxy" :description="connectionDescription">
-        <BaseInput
+  <ZDialog v-model="open" :title="title" width="36rem" :show-close="!busy" :close-on-click-modal="!busy" :close-on-press-escape="!busy">
+    <ZForm class="grid gap-5">
+      <ZFormItem label="代理名称" required>
+        <ZInput v-model="name" maxlength="100" :disabled="busy" aria-label="代理名称" placeholder="请输入代理名称" />
+      </ZFormItem>
+      <ZFormItem label="代理地址" :required="!proxy" :description="connectionDescription">
+        <ZInput
           v-model="proxyUrl"
-          :type="showSecret ? 'text' : 'password'"
+          show-password
           autocomplete="new-password"
           :disabled="busy"
           aria-label="代理地址"
           placeholder="请输入代理地址"
-        >
-          <template #suffix>
-            <BaseIconButton :label="showSecret ? '隐藏代理地址' : '显示代理地址'" :disabled="busy" @click="showSecret = !showSecret">
-              <EyeOff v-if="showSecret" class="size-4" />
-              <Eye v-else class="size-4" />
-            </BaseIconButton>
-          </template>
-        </BaseInput>
-      </BaseFormItem>
+        />
+      </ZFormItem>
       <div class="flex items-center justify-between gap-3">
-        <BaseSwitch v-model="customLocation" label="自定义时区位置" show-label :disabled="busy" />
-        <BaseIconButton
-          size="md"
-          :label="detectingLocation ? '正在解析出口位置' : '解析出口位置并填入表单'"
+        <ZSwitch v-model="customLocation" label="自定义时区位置" :disabled="busy" />
+        <ZIconButton
+          size="default"
+          :aria-label="detectingLocation ? '正在解析出口位置' : '解析出口位置并填入表单'"
           :title="detectingLocation ? '正在解析出口位置' : '解析出口位置并填入表单'"
           :aria-busy="detectingLocation"
           :disabled="busy"
@@ -81,7 +68,7 @@ watch(open, (value) => {
             <span v-if="detectingLocation" class="location-ripple location-ripple-delayed" aria-hidden="true" />
             <LocateFixed class="relative z-10 size-4" aria-hidden="true" />
           </span>
-        </BaseIconButton>
+        </ZIconButton>
       </div>
       <p v-if="testResult?.success === false" class="m-0 text-cp-sm text-cp-error-text" role="alert">
         连接测试失败：{{ testResult.message }}
@@ -93,25 +80,25 @@ watch(open, (value) => {
       <p v-if="proxy?.accountCount && proxyUrl.trim()" class="m-0 text-cp-sm text-cp-warning-text">
         将更新 {{ proxy.accountCount }} 个关联账号的出口
       </p>
-    </BaseForm>
+    </ZForm>
     <template #footer>
-      <BaseButton variant="secondary" :disabled="busy" @click="open = false">
+      <ZButton :disabled="busy" @click="open = false">
         取消
-      </BaseButton>
-      <BaseButton variant="secondary" :loading="testingConnection" :disabled="saving || detectingLocation" @click="emit('test')">
+      </ZButton>
+      <ZButton :loading="testingConnection" :disabled="saving || detectingLocation" @click="emit('test')">
         <template #icon>
           <Wifi class="size-4" />
         </template>
         测试连接
-      </BaseButton>
-      <BaseButton variant="primary" :loading="saving" :disabled="testingConnection || detectingLocation" @click="emit('save')">
+      </ZButton>
+      <ZButton type="primary" :loading="saving" :disabled="testingConnection || detectingLocation" @click="emit('save')">
         <template #icon>
           <Save class="size-4" />
         </template>
         保存代理
-      </BaseButton>
+      </ZButton>
     </template>
-  </BaseModal>
+  </ZDialog>
 </template>
 
 <style scoped>
diff --git a/frontend/src/views/proxies/composables/useProxies.ts b/frontend/src/views/proxies/composables/useProxies.ts
index 0535c23cc..8a3b379d3 100644
--- a/frontend/src/views/proxies/composables/useProxies.ts
+++ b/frontend/src/views/proxies/composables/useProxies.ts
@@ -1,5 +1,5 @@
 import type { OutboundProxyRecord, OutboundProxyTest } from '@/api'
-import { toast } from '@codex-proxy/ui'
+import { ZNotification } from '@codex-proxy/ui'
 import { computed, onMounted, reactive, shallowRef, watch } from 'vue'
 import { createProxy, deleteProxy, getProxies, probeProxy, testProxy, updateProxy } from '@/api'
 import { useAsyncAction } from '@/composables/useAsyncAction'
@@ -59,11 +59,11 @@ export function useProxies() {
         formTestResult.value = result.lastTest
       }
       if (result.lastTest?.success === false)
-        toast.error(`${result.name}：${result.lastTest.message}`)
+        ZNotification.error({ message: `${result.name}：${result.lastTest.message}` })
       else if (result.lastTest?.success)
-        toast.success(`${result.name}：连接成功`)
+        ZNotification.success({ message: `${result.name}：连接成功` })
       else
-        toast.error(result.lastTest?.message ?? '代理测试失败')
+        ZNotification.error({ message: result.lastTest?.message ?? '代理测试失败' })
     }
     catch {}
     finally {
@@ -81,7 +81,7 @@ export function useProxies() {
       return
     }
     if (!proxyUrl) {
-      toast.warning('请填写代理连接地址')
+      ZNotification.warning({ message: '请填写代理连接地址' })
       return
     }
     await formTestAction.run(async () => {
@@ -89,9 +89,9 @@ export function useProxies() {
       const result = await probeProxy({ proxyUrl, detectLocation: false })
       formTestResult.value = result
       if (!result.success)
-        toast.error(result.message)
+        ZNotification.error({ message: result.message })
       else
-        toast.success(`连接成功，耗时 ${result.latencyMs} ms`)
+        ZNotification.success({ message: `连接成功，耗时 ${result.latencyMs} ms` })
     })
   }
 
@@ -100,7 +100,7 @@ export function useProxies() {
       return
     const proxyUrl = form.proxyUrl.trim()
     if (!proxyUrl && !editing.value) {
-      toast.warning('请填写代理连接地址')
+      ZNotification.warning({ message: '请填写代理连接地址' })
       return
     }
     detectingLocation.value = true
@@ -120,22 +120,22 @@ export function useProxies() {
         }
         formTestResult.value = result
         if (!result?.success) {
-          toast.error(result?.message ?? '代理连接失败，未能解析位置')
+          ZNotification.error({ message: result?.message ?? '代理连接失败，未能解析位置' })
           return
         }
         if (result.location.status === 'detected') {
           form.location = { ...result.location.location }
           form.customLocation = true
-          toast.success('已填入出口位置')
+          ZNotification.success({ message: '已填入出口位置' })
         }
         else if (result.location.status === 'conflict') {
-          toast.warning('IPv4 与 IPv6 出口时区不一致，请手动填写')
+          ZNotification.warning({ message: 'IPv4 与 IPv6 出口时区不一致，请手动填写' })
         }
         else if (result.location.status === 'failed') {
-          toast.warning(result.location.message)
+          ZNotification.warning({ message: result.location.message })
         }
         else {
-          toast.warning('未获取到出口位置')
+          ZNotification.warning({ message: '未获取到出口位置' })
         }
       })
     }
@@ -150,13 +150,13 @@ export function useProxies() {
     const name = form.name.trim()
     const proxyUrl = form.proxyUrl.trim()
     if (!name || (!editing.value && !proxyUrl)) {
-      toast.warning('请填写代理名称和连接地址')
+      ZNotification.warning({ message: '请填写代理名称和连接地址' })
       return
     }
     const location = form.customLocation ? normalizeRequestLocation(form.location) : null
     const locationError = location ? requestLocationError(location) : ''
     if (locationError) {
-      toast.warning(locationError)
+      ZNotification.warning({ message: locationError })
       return
     }
     await saveAction.run(async () => {
@@ -177,7 +177,7 @@ export function useProxies() {
             location,
           }))
       showForm.value = false
-      toast.success('代理已保存')
+      ZNotification.success({ message: '代理已保存' })
       search.value = ''
       query.page.value = 1
       await query.execute()
@@ -197,7 +197,7 @@ export function useProxies() {
       await deleteProxy({ id: proxy.id, revision: proxy.revision })
       showDelete.value = false
       await query.execute()
-      toast.success('代理已删除')
+      ZNotification.success({ message: '代理已删除' })
     })
   }
 
diff --git a/frontend/src/views/proxies/composables/useProxyAccounts.ts b/frontend/src/views/proxies/composables/useProxyAccounts.ts
index ee0679895..d723ffc6f 100644
--- a/frontend/src/views/proxies/composables/useProxyAccounts.ts
+++ b/frontend/src/views/proxies/composables/useProxyAccounts.ts
@@ -1,4 +1,4 @@
-import { toast } from '@codex-proxy/ui'
+import { ZNotification } from '@codex-proxy/ui'
 import { computed, shallowRef, watch } from 'vue'
 import { getProxyAccounts, removeProxyAccount } from '@/api'
 import { useAsyncAction } from '@/composables/useAsyncAction'
@@ -50,7 +50,7 @@ export function useProxyAccounts(options: {
     return await removeAction.run(async () => {
       await removeProxyAccount({ proxyId, accountId })
       options.onRemoved()
-      toast.success('账号已移出当前代理，改为直连')
+      ZNotification.success({ message: '账号已移出当前代理，改为直连' })
       if (options.isOpen() && options.proxyId() === proxyId) {
         query.invalidate()
         query.items.value = query.items.value.filter(account => account.id !== accountId)
diff --git a/frontend/src/views/proxies/index.vue b/frontend/src/views/proxies/index.vue
index 314b62616..d02fd88f8 100644
--- a/frontend/src/views/proxies/index.vue
+++ b/frontend/src/views/proxies/index.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { OutboundProxyRecord } from '@/api'
-import { BaseButton, BaseCard, BaseConfirmModal, BaseIconButton, BaseInput, BasePageHeader, BaseTable, BaseTablePagination } from '@codex-proxy/ui'
+import { ZButton, ZCard, ZConfirmDialog, ZIconButton, ZInput, ZPageHeader, ZPagination, ZTable } from '@codex-proxy/ui'
 import { LockKeyhole, MapPin, Pencil, Plus, Search, Trash2, Users, Wifi } from '@lucide/vue'
 import { shallowRef } from 'vue'
 import ProxyAccountsModal from './components/ProxyAccountsModal.vue'
@@ -43,32 +43,32 @@ const inspected = shallowRef<OutboundProxyRecord | null>(null)
 
 <template>
   <div class="flex h-full min-h-0 w-full flex-col overflow-hidden">
-    <BasePageHeader
+    <ZPageHeader
       class="h-17"
       title="代理管理"
       description="管理账号使用的代理，测试连接并查看出口 IP"
     />
-    <BaseCard class="mt-5 flex h-[calc(100dvh-136px)] min-h-125 flex-col">
+    <ZCard class="mt-5 flex h-[calc(100dvh-136px)] min-h-125 flex-col">
       <template #header>
         <div class="flex w-full flex-col gap-3 sm:flex-row sm:items-center">
-          <BaseInput v-model="search" class="sm:w-80" aria-label="搜索代理" placeholder="搜索代理名称...">
+          <ZInput v-model="search" class="sm:w-80" aria-label="搜索代理" placeholder="搜索代理名称...">
             <template #prefix>
               <Search class="size-4.5 text-cp-text-tertiary" />
             </template>
-          </BaseInput>
+          </ZInput>
           <div class="flex shrink-0 items-center justify-end gap-2 sm:ml-auto">
-            <BaseButton variant="primary" @click="openForm()">
+            <ZButton type="primary" @click="openForm()">
               <template #icon>
                 <Plus class="size-4" />
               </template>
               新增代理
-            </BaseButton>
+            </ZButton>
           </div>
         </div>
       </template>
       <template #body>
         <div class="flex h-full min-h-0 flex-col">
-          <BaseTable class="min-h-0 flex-1" :columns="proxyColumns" :rows="proxies" :loading="loading" :empty-text="search.trim() ? '没有找到匹配的代理，请尝试其他名称' : '暂无代理，请点击新增代理添加'">
+          <ZTable class="min-h-0 flex-1" :columns="proxyColumns" :data="proxies" :loading="loading" :empty-text="search.trim() ? '没有找到匹配的代理，请尝试其他名称' : '暂无代理，请点击新增代理添加'">
             <template #name="{ row }">
               <span class="block truncate text-cp text-cp-text" :title="row.name">{{ row.name }}</span>
             </template>
@@ -121,22 +121,22 @@ const inspected = shallowRef<OutboundProxyRecord | null>(null)
             </template>
             <template #actions="{ row }">
               <div class="flex items-center gap-1">
-                <BaseIconButton size="sm" label="测试代理" :loading="testingIds.has(row.id)" :disabled="testingIds.has(row.id)" @click="checkProxy(row)">
+                <ZIconButton size="small" aria-label="测试代理" :loading="testingIds.has(row.id)" :disabled="testingIds.has(row.id)" @click="checkProxy(row)">
                   <Wifi class="size-3.5 text-cp-link" />
-                </BaseIconButton>
-                <BaseIconButton size="sm" label="编辑代理" :disabled="testingIds.has(row.id)" @click="openForm(row)">
+                </ZIconButton>
+                <ZIconButton size="small" aria-label="编辑代理" :disabled="testingIds.has(row.id)" @click="openForm(row)">
                   <Pencil class="size-3.5 text-cp-link" />
-                </BaseIconButton>
-                <BaseIconButton size="sm" :label="row.accountCount ? '代理正在被账号使用' : '删除代理'" :disabled="row.accountCount > 0 || testingIds.has(row.id)" @click="requestDelete(row)">
+                </ZIconButton>
+                <ZIconButton size="small" :aria-label="row.accountCount ? '代理正在被账号使用' : '删除代理'" :disabled="row.accountCount > 0 || testingIds.has(row.id)" @click="requestDelete(row)">
                   <Trash2 class="size-3.5 text-cp-error" />
-                </BaseIconButton>
+                </ZIconButton>
               </div>
             </template>
-          </BaseTable>
-          <BaseTablePagination :pagination="pagination" :loading="loading" @page-change="setPage" @page-size-change="setPageSize" />
+          </ZTable>
+          <ZPagination v-bind="pagination" :disabled="loading" @current-change="setPage" @size-change="setPageSize" />
         </div>
       </template>
-    </BaseCard>
+    </ZCard>
 
     <ProxyFormModal
       v-model="showForm"
@@ -154,11 +154,11 @@ const inspected = shallowRef<OutboundProxyRecord | null>(null)
       @detect-location="detectLocation"
       @after-leave="clearCredentials"
     />
-    <BaseConfirmModal v-model="showDelete" title="删除代理" destructive :loading="deleting" @confirm="confirmDelete">
+    <ZConfirmDialog v-model="showDelete" title="删除代理" destructive :loading="deleting" @confirm="confirmDelete">
       <p class="m-0">
         确定删除“{{ pendingDelete?.name }}”吗？
       </p>
-    </BaseConfirmModal>
+    </ZConfirmDialog>
     <ProxyAccountsModal v-model="showAccounts" :proxy="inspected" @removed="loadProxies({ silent: true })" />
   </div>
 </template>
diff --git a/frontend/src/views/settings/components/AccountAffinityCard.vue b/frontend/src/views/settings/components/AccountAffinityCard.vue
index e69c38a56..b05c757a3 100644
--- a/frontend/src/views/settings/components/AccountAffinityCard.vue
+++ b/frontend/src/views/settings/components/AccountAffinityCard.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { AccountAffinity } from '@/api'
-import { BaseCard, BaseForm, BaseFormItem, BaseIconButton, BaseInput, BasePopover, BaseSegmented } from '@codex-proxy/ui'
+import { ZCard, ZForm, ZFormItem, ZIconButton, ZInput, ZPopover, ZSegmented } from '@codex-proxy/ui'
 import { CircleAlert } from '@lucide/vue'
 
 const props = defineProps<{ disabled: boolean }>()
@@ -11,15 +11,15 @@ const affinityOptions = [{ label: '宽松', value: 'relaxed' }, { label: '优先
 </script>
 
 <template>
-  <BaseCard title="亲和策略">
-    <BaseForm class="max-w-6xl sm:grid-cols-2 lg:grid-cols-3">
-      <BaseFormItem label="账号亲和" description="控制同一会话内的账号绑定方式">
+  <ZCard title="亲和策略">
+    <ZForm class="max-w-6xl sm:grid-cols-2 lg:grid-cols-3">
+      <ZFormItem label="账号亲和" description="控制同一会话内的账号绑定方式">
         <template #label-extra>
-          <BasePopover class="-my-1" trigger="hover-click" placement="top-start">
-            <template #trigger="{ open }">
-              <BaseIconButton label="账号亲和说明" :title="undefined" :aria-expanded="open" class="size-6! hover:bg-transparent! active:bg-transparent!">
+          <ZPopover class="-my-1" trigger="hover-click" placement="top-start">
+            <template #reference="{ open }">
+              <ZIconButton aria-label="账号亲和说明" :title="undefined" :aria-expanded="open" class="size-6! hover:bg-transparent! active:bg-transparent!">
                 <CircleAlert class="size-3.5" aria-hidden="true" />
-              </BaseIconButton>
+              </ZIconButton>
             </template>
             <div class="max-w-72 space-y-2 px-3 py-2 text-cp-sm leading-relaxed text-cp-text-secondary">
               <p>宽松：会话内请求直接按调度策略选号，不优先主账号</p>
@@ -27,20 +27,20 @@ const affinityOptions = [{ label: '宽松', value: 'relaxed' }, { label: '优先
               <p>严格：同一会话共用账号，子线程等待当前账号，并跟随主线程换号</p>
               <p>重新选号仍遵循当前调度策略</p>
             </div>
-          </BasePopover>
+          </ZPopover>
         </template>
-        <BaseSegmented v-model="accountAffinity" label="账号亲和" :options="affinityOptions" :disabled="props.disabled" class="w-full" />
-      </BaseFormItem>
-      <BaseFormItem label="亲和时长" description="账号绑定的保留时间，成功调度后续期">
-        <BaseInput v-model="affinityTtlHours" aria-label="亲和时长（小时）" type="number" min="1" max="720" step="1" :disabled="props.disabled">
+        <ZSegmented v-model="accountAffinity" aria-label="账号亲和" :options="affinityOptions" :disabled="props.disabled" class="w-full" />
+      </ZFormItem>
+      <ZFormItem label="亲和时长" description="账号绑定的保留时间，成功调度后续期">
+        <ZInput v-model="affinityTtlHours" aria-label="亲和时长（小时）" type="number" min="1" max="720" step="1" :disabled="props.disabled">
           <template #suffix>
             小时
           </template>
-        </BaseInput>
-      </BaseFormItem>
-      <BaseFormItem label="最大换号次数" description="单请求最多换号次数，0 表示不换号">
-        <BaseInput v-model="maxAccountRotations" aria-label="最大换号次数" type="number" min="0" max="31" step="1" :disabled="props.disabled" />
-      </BaseFormItem>
-    </BaseForm>
-  </BaseCard>
+        </ZInput>
+      </ZFormItem>
+      <ZFormItem label="最大换号次数" description="单请求最多换号次数，0 表示不换号">
+        <ZInput v-model="maxAccountRotations" aria-label="最大换号次数" type="number" min="0" max="31" step="1" :disabled="props.disabled" />
+      </ZFormItem>
+    </ZForm>
+  </ZCard>
 </template>
diff --git a/frontend/src/views/settings/components/AccountAutoFreezeCard.vue b/frontend/src/views/settings/components/AccountAutoFreezeCard.vue
index 1e3493202..59b964e04 100644
--- a/frontend/src/views/settings/components/AccountAutoFreezeCard.vue
+++ b/frontend/src/views/settings/components/AccountAutoFreezeCard.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { BaseCard, BaseCheckbox, BaseForm, BaseFormItem, BaseIconButton, BaseInput, BasePopover, BaseSwitch } from '@codex-proxy/ui'
+import { ZCard, ZCheckbox, ZForm, ZFormItem, ZIconButton, ZInput, ZPopover, ZSwitch } from '@codex-proxy/ui'
 
 import { Activity, CircleAlert, Gauge, Snowflake, Timer } from '@lucide/vue'
 import { useId } from 'vue'
@@ -15,23 +15,22 @@ const adaptiveConcurrencyHintId = useId()
 </script>
 
 <template>
-  <BaseCard
+  <ZCard
     title="过载保护"
     description="上游容量类错误累计达到阈值时，暂停账号调度并进入冷却"
   >
-    <BaseForm class="max-w-6xl sm:grid-cols-2">
-      <BaseSwitch
+    <ZForm class="max-w-6xl sm:grid-cols-2">
+      <ZSwitch
         v-model="enabled"
         class="col-span-full justify-self-start"
         label="启用过载保护"
-        show-label
       />
 
-      <BaseFormItem
+      <ZFormItem
         label="失败次数阈值"
         description="统计窗口内累计容量类失败达到此次数后触发"
       >
-        <BaseInput
+        <ZInput
           v-model="threshold"
           :disabled="!enabled"
           aria-label="失败次数阈值"
@@ -46,14 +45,14 @@ const adaptiveConcurrencyHintId = useId()
           <template #suffix>
             <span class="text-cp-sm">次</span>
           </template>
-        </BaseInput>
-      </BaseFormItem>
+        </ZInput>
+      </ZFormItem>
 
-      <BaseFormItem
+      <ZFormItem
         label="统计窗口"
         description="每次失败后，计数有效期向后顺延"
       >
-        <BaseInput
+        <ZInput
           v-model="windowSeconds"
           :disabled="!enabled"
           aria-label="统计窗口秒数"
@@ -68,14 +67,14 @@ const adaptiveConcurrencyHintId = useId()
           <template #suffix>
             <span class="text-cp-sm">秒</span>
           </template>
-        </BaseInput>
-      </BaseFormItem>
+        </ZInput>
+      </ZFormItem>
 
-      <BaseFormItem
+      <ZFormItem
         label="冷却时长"
         description="探测失败时，按此时长延后恢复"
       >
-        <BaseInput
+        <ZInput
           v-model="durationSeconds"
           :disabled="!enabled"
           aria-label="冷却时长秒数"
@@ -90,21 +89,20 @@ const adaptiveConcurrencyHintId = useId()
           <template #suffix>
             <span class="text-cp-sm">秒</span>
           </template>
-        </BaseInput>
-      </BaseFormItem>
-      <BaseFormItem
+        </ZInput>
+      </ZFormItem>
+      <ZFormItem
         label="恢复探测模型"
         description="启用后需探测成功才恢复，模型留空时选择首个可用模型"
       >
         <template #extra>
-          <BaseCheckbox
+          <ZCheckbox
             v-model="probeEnabled"
             :disabled="!enabled"
             label="恢复前探测"
-            show-label
           />
         </template>
-        <BaseInput
+        <ZInput
           v-model="probeModel"
           :disabled="!enabled || !probeEnabled"
           aria-label="恢复探测模型"
@@ -113,33 +111,32 @@ const adaptiveConcurrencyHintId = useId()
           <template #prefix>
             <Gauge class="size-4" />
           </template>
-        </BaseInput>
-      </BaseFormItem>
+        </ZInput>
+      </ZFormItem>
 
       <div class="col-span-full flex items-center gap-1">
-        <BaseCheckbox
+        <ZCheckbox
           v-model="adaptiveConcurrency"
           :disabled="!enabled"
           label="自适应并发下调"
-          show-label
         />
-        <BasePopover class="-my-1" trigger="hover-click" placement="top-start" :hover-delay="240">
-          <template #trigger="{ open }">
-            <BaseIconButton
-              label="自适应并发下调说明"
+        <ZPopover class="-my-1" trigger="hover-click" placement="top-start" :hover-delay="240">
+          <template #reference="{ open }">
+            <ZIconButton
+              aria-label="自适应并发下调说明"
               :title="undefined"
               class="size-6! hover:bg-transparent! active:bg-transparent!"
               :aria-expanded="open"
               :aria-describedby="open ? adaptiveConcurrencyHintId : undefined"
             >
               <CircleAlert class="size-3.5" aria-hidden="true" />
-            </BaseIconButton>
+            </ZIconButton>
           </template>
           <p :id="adaptiveConcurrencyHintId" role="tooltip" class="m-0 max-w-72 px-3 py-2 text-cp-sm leading-relaxed text-cp-text-secondary">
             修改账号并发上限，恢复后不自动调高
           </p>
-        </BasePopover>
+        </ZPopover>
       </div>
-    </BaseForm>
-  </BaseCard>
+    </ZForm>
+  </ZCard>
 </template>
diff --git a/frontend/src/views/settings/components/AccountWarmupCard.vue b/frontend/src/views/settings/components/AccountWarmupCard.vue
index b91042967..370031e43 100644
--- a/frontend/src/views/settings/components/AccountWarmupCard.vue
+++ b/frontend/src/views/settings/components/AccountWarmupCard.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { BaseCard, BaseForm, BaseFormItem, BaseInput, BaseSwitch } from '@codex-proxy/ui'
+import { ZCard, ZForm, ZFormItem, ZInput, ZSwitch } from '@codex-proxy/ui'
 import { Clock, Sparkles } from '@lucide/vue'
 
 const enabled = defineModel<boolean>('enabled', { required: true })
@@ -8,23 +8,22 @@ const model = defineModel<string>('model', { required: true })
 </script>
 
 <template>
-  <BaseCard
+  <ZCard
     title="账号预激活"
     description="在指定时间向空闲的 Codex OAuth 账号发送一次请求，尝试启动额度窗口"
   >
-    <BaseForm class="max-w-6xl sm:grid-cols-2">
-      <BaseSwitch
+    <ZForm class="max-w-6xl sm:grid-cols-2">
+      <ZSwitch
         v-model="enabled"
         class="col-span-full justify-self-start"
         label="启用每日预激活"
-        show-label
       />
 
-      <BaseFormItem
+      <ZFormItem
         label="执行时间"
         description="HH:MM；多个时间用英文逗号分隔"
       >
-        <BaseInput
+        <ZInput
           v-model="scheduleTime"
           :disabled="!enabled"
           aria-label="每日激活时间"
@@ -33,15 +32,15 @@ const model = defineModel<string>('model', { required: true })
           <template #prefix>
             <Clock class="size-4" />
           </template>
-        </BaseInput>
-      </BaseFormItem>
+        </ZInput>
+      </ZFormItem>
 
-      <BaseFormItem
+      <ZFormItem
         label="预激活模型"
         description="启用时必填，请填写账号可用的模型"
         :required="enabled"
       >
-        <BaseInput
+        <ZInput
           v-model="model"
           :disabled="!enabled"
           aria-label="预激活模型"
@@ -50,8 +49,8 @@ const model = defineModel<string>('model', { required: true })
           <template #prefix>
             <Sparkles class="size-4" />
           </template>
-        </BaseInput>
-      </BaseFormItem>
-    </BaseForm>
-  </BaseCard>
+        </ZInput>
+      </ZFormItem>
+    </ZForm>
+  </ZCard>
 </template>
diff --git a/frontend/src/views/settings/components/AdminApiKeyCard.vue b/frontend/src/views/settings/components/AdminApiKeyCard.vue
index bd8f077ba..e1e9f81b1 100644
--- a/frontend/src/views/settings/components/AdminApiKeyCard.vue
+++ b/frontend/src/views/settings/components/AdminApiKeyCard.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { BaseButton, BaseCard, BaseIconButton, BaseMotionIcon } from '@codex-proxy/ui'
+import { ZButton, ZCard, ZIconButton, ZMotionIcon } from '@codex-proxy/ui'
 
 import { Copy, KeyRound, Trash2 } from '@lucide/vue'
 
@@ -23,11 +23,10 @@ const emit = defineEmits<{
 </script>
 
 <template>
-  <BaseCard title="管理员 API Key" description="用于外部系统集成，具有管理员权限">
+  <ZCard title="管理员 API Key" description="用于外部系统集成，具有管理员权限">
     <template #actions>
       <div class="flex flex-wrap items-center gap-2">
-        <BaseButton
-          variant="secondary"
+        <ZButton
           :loading="regenerating"
           :disabled="loading || deleting"
           @click="emit('regenerate')"
@@ -36,9 +35,9 @@ const emit = defineEmits<{
             <KeyRound class="size-4" />
           </template>
           {{ status.exists ? '重新生成' : '生成' }}
-        </BaseButton>
-        <BaseButton
-          variant="destructive"
+        </ZButton>
+        <ZButton
+          type="danger" variant="plain"
           :disabled="loading || regenerating || !status.exists"
           @click="emit('requestDelete')"
         >
@@ -46,18 +45,18 @@ const emit = defineEmits<{
             <Trash2 class="size-4" />
           </template>
           删除
-        </BaseButton>
+        </ZButton>
       </div>
     </template>
 
     <div class="grid max-w-6xl gap-4">
       <div class="flex min-h-16 items-center justify-between gap-4 rounded-cp bg-cp-fill-quaternary px-4 py-3">
         <div class="flex min-w-0 items-center gap-3">
-          <BaseMotionIcon
+          <ZMotionIcon
             class="inline-flex size-9 shrink-0 items-center justify-center rounded-cp bg-cp-bg-container text-cp-cyan-solid shadow-cp-tertiary"
           >
             <KeyRound class="size-4" />
-          </BaseMotionIcon>
+          </ZMotionIcon>
           <div class="min-w-0">
             <p class="m-0 text-cp leading-[1.15] font-bold text-cp-text">
               {{ status.exists ? '已启用' : '未生成' }}
@@ -85,11 +84,11 @@ const emit = defineEmits<{
           >
             {{ generatedKey }}
           </code>
-          <BaseIconButton size="md" label="复制" @click="emit('copy')">
+          <ZIconButton size="default" aria-label="复制" @click="emit('copy')">
             <Copy class="size-4" />
-          </BaseIconButton>
+          </ZIconButton>
         </div>
       </div>
     </div>
-  </BaseCard>
+  </ZCard>
 </template>
diff --git a/frontend/src/views/settings/components/AdminPasswordCard.vue b/frontend/src/views/settings/components/AdminPasswordCard.vue
index b973eb691..2d50ab39a 100644
--- a/frontend/src/views/settings/components/AdminPasswordCard.vue
+++ b/frontend/src/views/settings/components/AdminPasswordCard.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { BaseButton, BaseCard, BaseMotionIcon } from '@codex-proxy/ui'
+import { ZButton, ZCard, ZMotionIcon } from '@codex-proxy/ui'
 import { LockKeyhole } from '@lucide/vue'
 import { shallowRef } from 'vue'
 import ChangePasswordModal from './ChangePasswordModal.vue'
@@ -8,20 +8,20 @@ const open = shallowRef(false)
 </script>
 
 <template>
-  <BaseCard title="管理员密码" description="用于登录管理后台">
+  <ZCard title="管理员密码" description="用于登录管理后台">
     <template #actions>
-      <BaseButton variant="secondary" @click="open = true">
+      <ZButton @click="open = true">
         <template #icon>
           <LockKeyhole class="size-4" aria-hidden="true" />
         </template>
         修改密码
-      </BaseButton>
+      </ZButton>
     </template>
 
     <div class="flex min-h-16 max-w-6xl items-center gap-3 rounded-cp bg-cp-fill-quaternary px-4 py-3">
-      <BaseMotionIcon class="inline-flex size-9 shrink-0 items-center justify-center rounded-cp bg-cp-bg-container text-cp-primary-text shadow-cp-tertiary">
+      <ZMotionIcon class="inline-flex size-9 shrink-0 items-center justify-center rounded-cp bg-cp-bg-container text-cp-primary-text shadow-cp-tertiary">
         <LockKeyhole class="size-4" aria-hidden="true" />
-      </BaseMotionIcon>
+      </ZMotionIcon>
       <div class="min-w-0">
         <p class="m-0 text-cp leading-[1.15] font-bold text-cp-text">
           验证当前密码
@@ -31,6 +31,6 @@ const open = shallowRef(false)
         </p>
       </div>
     </div>
-  </BaseCard>
+  </ZCard>
   <ChangePasswordModal v-model="open" />
 </template>
diff --git a/frontend/src/views/settings/components/ChangePasswordModal.vue b/frontend/src/views/settings/components/ChangePasswordModal.vue
index 588795b53..da66d5db9 100644
--- a/frontend/src/views/settings/components/ChangePasswordModal.vue
+++ b/frontend/src/views/settings/components/ChangePasswordModal.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { BaseButton, BaseInput, BaseModal, BaseFormItem as FormItem, toast } from '@codex-proxy/ui'
+import { ZFormItem as FormItem, ZButton, ZDialog, ZInput, ZNotification } from '@codex-proxy/ui'
 import { computed, reactive, shallowRef, useId, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import { changeAdminPassword } from '@/api'
@@ -46,32 +46,32 @@ async function submit() {
     await changeAdminPassword({ currentPassword: form.currentPassword, newPassword: form.newPassword })
     auth.invalidateSession()
     open.value = false
-    toast.success('密码已修改，请使用新密码重新登录')
+    ZNotification.success({ message: '密码已修改，请使用新密码重新登录' })
     await router.replace('/login')
   })
 }
 </script>
 
 <template>
-  <BaseModal v-model="open" title="修改管理员密码" description="验证当前密码后，设置新的登录密码" size="sm" :dismissible="!loading" @after-leave="clearForm">
+  <ZDialog v-model="open" title="修改管理员密码" description="验证当前密码后，设置新的登录密码" width="28rem" :show-close="!loading" :close-on-click-modal="!loading" :close-on-press-escape="!loading" @closed="clearForm">
     <form :id="formId" class="grid gap-5" @submit.prevent="submit">
       <FormItem label="当前密码" required>
-        <BaseInput v-model="form.currentPassword" type="password" autocomplete="current-password" placeholder="输入当前密码" :disabled="loading" maxlength="4096" />
+        <ZInput v-model="form.currentPassword" type="password" autocomplete="current-password" placeholder="输入当前密码" :disabled="loading" maxlength="4096" />
       </FormItem>
       <FormItem label="新密码" description="至少 12 个字符，建议混合使用字母、数字和符号" :error="passwordError" required>
-        <BaseInput v-model="form.newPassword" type="password" autocomplete="new-password" placeholder="设置新密码" :disabled="loading" maxlength="1024" />
+        <ZInput v-model="form.newPassword" type="password" autocomplete="new-password" placeholder="设置新密码" :disabled="loading" maxlength="1024" />
       </FormItem>
       <FormItem label="确认新密码" :error="confirmationError" required>
-        <BaseInput v-model="form.confirmation" type="password" autocomplete="new-password" placeholder="再次输入新密码" :disabled="loading" maxlength="1024" />
+        <ZInput v-model="form.confirmation" type="password" autocomplete="new-password" placeholder="再次输入新密码" :disabled="loading" maxlength="1024" />
       </FormItem>
     </form>
     <template #footer>
-      <BaseButton variant="secondary" :disabled="loading" @click="open = false">
+      <ZButton :disabled="loading" @click="open = false">
         取消
-      </BaseButton>
-      <BaseButton type="submit" :form="formId" variant="primary" :loading="loading">
+      </ZButton>
+      <ZButton native-type="submit" :form="formId" type="primary" :loading="loading">
         保存并重新登录
-      </BaseButton>
+      </ZButton>
     </template>
-  </BaseModal>
+  </ZDialog>
 </template>
diff --git a/frontend/src/views/settings/components/ClientProfileCard.vue b/frontend/src/views/settings/components/ClientProfileCard.vue
index fbc0413d6..e3f4d0dad 100644
--- a/frontend/src/views/settings/components/ClientProfileCard.vue
+++ b/frontend/src/views/settings/components/ClientProfileCard.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { ProviderRequestProfiles } from '@/api/modules/settings/profiles'
-import { BaseCard } from '@codex-proxy/ui'
+import { ZCard } from '@codex-proxy/ui'
 import ProviderRequestProfilesEditor from '@/components/client-profile/ProviderRequestProfilesEditor.vue'
 
 withDefaults(defineProps<{ active?: boolean, disabled?: boolean }>(), {
@@ -12,7 +12,7 @@ const model = defineModel<ProviderRequestProfiles>({ required: true })
 </script>
 
 <template>
-  <BaseCard>
+  <ZCard>
     <ProviderRequestProfilesEditor
       v-model="model"
       :active="active"
@@ -30,5 +30,5 @@ const model = defineModel<ProviderRequestProfiles>({ required: true })
         </div>
       </template>
     </ProviderRequestProfilesEditor>
-  </BaseCard>
+  </ZCard>
 </template>
diff --git a/frontend/src/views/settings/components/ConcurrencyPolicyCard.vue b/frontend/src/views/settings/components/ConcurrencyPolicyCard.vue
index 87fcead22..0cd1d5395 100644
--- a/frontend/src/views/settings/components/ConcurrencyPolicyCard.vue
+++ b/frontend/src/views/settings/components/ConcurrencyPolicyCard.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { BaseCard, BaseForm, BaseFormItem, BaseIconButton, BaseInput, BasePopover } from '@codex-proxy/ui'
+import { ZCard, ZForm, ZFormItem, ZIconButton, ZInput, ZPopover } from '@codex-proxy/ui'
 
 import { CircleAlert, Gauge, Timer } from '@lucide/vue'
 
@@ -12,13 +12,13 @@ const openaiGuardianReservedConcurrency = defineModel<string>('openaiGuardianRes
 </script>
 
 <template>
-  <BaseCard title="并发策略">
-    <BaseForm class="max-w-6xl sm:grid-cols-2">
-      <BaseFormItem
+  <ZCard title="并发策略">
+    <ZForm class="max-w-6xl sm:grid-cols-2">
+      <ZFormItem
         label="默认账号并发上限"
         description="账号未单独设置时使用的并发上限，0 表示不限制"
       >
-        <BaseInput
+        <ZInput
           v-model="maxConcurrentPerAccount"
           aria-label="默认账号并发上限"
           type="number"
@@ -29,14 +29,14 @@ const openaiGuardianReservedConcurrency = defineModel<string>('openaiGuardianRes
           <template #prefix>
             <Gauge class="size-4" />
           </template>
-        </BaseInput>
-      </BaseFormItem>
+        </ZInput>
+      </ZFormItem>
 
-      <BaseFormItem
+      <ZFormItem
         label="最小请求间隔"
         description="控制同一账号两次调度之间的最小等待时间"
       >
-        <BaseInput
+        <ZInput
           v-model="requestIntervalMs"
           aria-label="最小请求间隔（毫秒）"
           type="number"
@@ -47,33 +47,33 @@ const openaiGuardianReservedConcurrency = defineModel<string>('openaiGuardianRes
           <template #suffix>
             毫秒
           </template>
-        </BaseInput>
-      </BaseFormItem>
-      <BaseFormItem label="密钥队列容量" description="每个客户端密钥允许等待的最大请求数，0 表示不排队">
-        <BaseInput v-model="maxWaitingPerKey" aria-label="密钥队列容量" type="number" min="0" max="1000" step="1" />
-      </BaseFormItem>
-      <BaseFormItem label="账号队列容量" description="每个上游账号允许等待的最大请求数，0 表示不排队">
-        <BaseInput v-model="maxWaitingPerAccount" aria-label="账号队列容量" type="number" min="0" max="1000" step="1" />
-      </BaseFormItem>
-      <BaseFormItem label="排队超时（秒）" description="密钥队列与账号队列共用的等待时限，从首次入队起计时，1～120 秒">
-        <BaseInput v-model="concurrencyWaitTimeoutSeconds" aria-label="排队超时（秒）" type="number" min="1" max="120" step="1" />
-      </BaseFormItem>
-      <BaseFormItem label="自动审批独立并发" description="每个账号额外的审批名额，0 表示共用普通并发">
+        </ZInput>
+      </ZFormItem>
+      <ZFormItem label="密钥队列容量" description="每个客户端密钥允许等待的最大请求数，0 表示不排队">
+        <ZInput v-model="maxWaitingPerKey" aria-label="密钥队列容量" type="number" min="0" max="1000" step="1" />
+      </ZFormItem>
+      <ZFormItem label="账号队列容量" description="每个上游账号允许等待的最大请求数，0 表示不排队">
+        <ZInput v-model="maxWaitingPerAccount" aria-label="账号队列容量" type="number" min="0" max="1000" step="1" />
+      </ZFormItem>
+      <ZFormItem label="排队超时（秒）" description="密钥队列与账号队列共用的等待时限，从首次入队起计时，1～120 秒">
+        <ZInput v-model="concurrencyWaitTimeoutSeconds" aria-label="排队超时（秒）" type="number" min="1" max="120" step="1" />
+      </ZFormItem>
+      <ZFormItem label="自动审批独立并发" description="每个账号额外的审批名额，0 表示共用普通并发">
         <template #label-extra>
-          <BasePopover class="-my-1" trigger="hover-click" placement="top-start">
-            <template #trigger="{ open }">
-              <BaseIconButton label="自动审批独立并发说明" :title="undefined" :aria-expanded="open" class="size-6! hover:bg-transparent! active:bg-transparent!">
+          <ZPopover class="-my-1" trigger="hover-click" placement="top-start">
+            <template #reference="{ open }">
+              <ZIconButton aria-label="自动审批独立并发说明" :title="undefined" :aria-expanded="open" class="size-6! hover:bg-transparent! active:bg-transparent!">
                 <CircleAlert class="size-3.5" aria-hidden="true" />
-              </BaseIconButton>
+              </ZIconButton>
             </template>
             <div class="max-w-72 space-y-2 px-3 py-2 text-cp-sm leading-relaxed text-cp-text-secondary">
               <p>仅对 OpenAI 账号生效，普通并发为 10、审批名额为 3 时，两类请求分别最多运行 10 个和 3 个，互不占用名额</p>
               <p>开启独立额度后，审批请求单独排队，可超过账号队列容量，仍受总等待容量、排队超时、请求间隔与密钥限额约束</p>
             </div>
-          </BasePopover>
+          </ZPopover>
         </template>
-        <BaseInput v-model="openaiGuardianReservedConcurrency" aria-label="自动审批独立并发" type="number" min="0" max="4294967295" step="1" />
-      </BaseFormItem>
-    </BaseForm>
-  </BaseCard>
+        <ZInput v-model="openaiGuardianReservedConcurrency" aria-label="自动审批独立并发" type="number" min="0" max="4294967295" step="1" />
+      </ZFormItem>
+    </ZForm>
+  </ZCard>
 </template>
diff --git a/frontend/src/views/settings/components/ModelAliasesCard.vue b/frontend/src/views/settings/components/ModelAliasesCard.vue
index 4875e3ce5..d79f7bcd8 100644
--- a/frontend/src/views/settings/components/ModelAliasesCard.vue
+++ b/frontend/src/views/settings/components/ModelAliasesCard.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { BaseButton, BaseCard, BaseIconButton, BaseInput } from '@codex-proxy/ui'
+import { ZButton, ZCard, ZIconButton, ZInput } from '@codex-proxy/ui'
 
 import { Plus, Trash2 } from '@lucide/vue'
 
@@ -20,18 +20,18 @@ const emit = defineEmits<{
 </script>
 
 <template>
-  <BaseCard
+  <ZCard
     title="模型映射"
     description="将客户端请求的模型名称映射为实际使用的上游模型"
   >
     <div class="grid gap-4">
       <div class="flex flex-wrap items-center gap-3">
-        <BaseButton variant="secondary" :disabled="loading" @click="emit('addMapping')">
+        <ZButton :disabled="loading" @click="emit('addMapping')">
           <template #icon>
             <Plus class="size-4" />
           </template>
           添加映射
-        </BaseButton>
+        </ZButton>
         <span v-if="error" class="text-xs font-emphasis text-cp-error-text">{{ error }}</span>
       </div>
 
@@ -47,30 +47,29 @@ const emit = defineEmits<{
           :key="index"
           class="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-3 rounded-cp-card bg-cp-fill-quaternary p-3 sm:grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)_auto]"
         >
-          <BaseInput
+          <ZInput
             :model-value="row.requestedModel"
             placeholder="请求模型"
             aria-label="请求模型"
             @update:model-value="emit('updateMapping', index, 'requestedModel', $event)"
           />
           <span class="hidden text-cp-text-quaternary sm:block" aria-hidden="true">→</span>
-          <BaseInput
+          <ZInput
             class="col-start-1 row-start-2 sm:col-start-auto sm:row-start-auto"
             :model-value="row.upstreamModel"
             placeholder="上游模型"
             aria-label="上游模型名称"
             @update:model-value="emit('updateMapping', index, 'upstreamModel', $event)"
           />
-          <BaseIconButton
+          <ZIconButton
             class="col-start-2 row-span-2 row-start-1 sm:col-start-auto sm:row-span-1 sm:row-start-auto"
-            variant="ghost"
-            label="删除映射"
+            aria-label="删除映射"
             @click="emit('removeMapping', index)"
           >
             <Trash2 class="size-4 text-cp-error" />
-          </BaseIconButton>
+          </ZIconButton>
         </div>
       </div>
     </div>
-  </BaseCard>
+  </ZCard>
 </template>
diff --git a/frontend/src/views/settings/components/RequestLocationCard.vue b/frontend/src/views/settings/components/RequestLocationCard.vue
index 3fcc69f40..a9b882ad3 100644
--- a/frontend/src/views/settings/components/RequestLocationCard.vue
+++ b/frontend/src/views/settings/components/RequestLocationCard.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { RequestLocation } from '@/api'
-import { BaseCard, BaseForm, BaseSwitch } from '@codex-proxy/ui'
+import { ZCard, ZForm, ZSwitch } from '@codex-proxy/ui'
 import RequestLocationFields from '@/components/RequestLocationFields.vue'
 
 defineProps<{ disabled: boolean }>()
@@ -9,14 +9,14 @@ const enabled = defineModel<boolean>('enabled', { required: true })
 </script>
 
 <template>
-  <BaseCard title="请求位置覆盖" description="覆盖 Codex 请求中的时区与位置字段，账号出站代理的自定义位置优先">
+  <ZCard title="请求位置覆盖" description="覆盖 Codex 请求中的时区与位置字段，账号出站代理的自定义位置优先">
     <template #body>
       <div>
-        <BaseSwitch v-model="enabled" label="启用位置覆盖" show-label :disabled="disabled" />
+        <ZSwitch v-model="enabled" label="启用位置覆盖" :disabled="disabled" />
       </div>
-      <BaseForm class="mt-4 max-w-6xl">
+      <ZForm class="mt-4 max-w-6xl">
         <RequestLocationFields v-model="location" :disabled="disabled || !enabled" />
-      </BaseForm>
+      </ZForm>
     </template>
-  </BaseCard>
+  </ZCard>
 </template>
diff --git a/frontend/src/views/settings/components/ResponseBodyLimitCard.vue b/frontend/src/views/settings/components/ResponseBodyLimitCard.vue
index af8b604a6..3683be1d7 100644
--- a/frontend/src/views/settings/components/ResponseBodyLimitCard.vue
+++ b/frontend/src/views/settings/components/ResponseBodyLimitCard.vue
@@ -1,19 +1,19 @@
 <script setup lang="ts">
-import { BaseCard, BaseForm, BaseFormItem, BaseInput } from '@codex-proxy/ui'
+import { ZCard, ZForm, ZFormItem, ZInput } from '@codex-proxy/ui'
 
 const model = defineModel<string>({ required: true })
 </script>
 
 <template>
-  <BaseCard title="请求体限制" description="限制 Responses 请求解压后的请求体大小">
-    <BaseForm class="max-w-6xl sm:grid-cols-2 sm:items-end">
-      <BaseFormItem label="解压后大小上限" description="调高可接收更大的图片和历史上下文，也会增加内存占用">
-        <BaseInput v-model="model" aria-label="解压后请求体大小上限" type="number" min="1" step="1">
+  <ZCard title="请求体限制" description="限制 Responses 请求解压后的请求体大小">
+    <ZForm class="max-w-6xl sm:grid-cols-2 sm:items-end">
+      <ZFormItem label="解压后大小上限" description="调高可接收更大的图片和历史上下文，也会增加内存占用">
+        <ZInput v-model="model" aria-label="解压后请求体大小上限" type="number" min="1" step="1">
           <template #suffix>
             MiB
           </template>
-        </BaseInput>
-      </BaseFormItem>
-    </BaseForm>
-  </BaseCard>
+        </ZInput>
+      </ZFormItem>
+    </ZForm>
+  </ZCard>
 </template>
diff --git a/frontend/src/views/settings/components/RotationStrategyCard.vue b/frontend/src/views/settings/components/RotationStrategyCard.vue
index d8d70a46a..4856163d2 100644
--- a/frontend/src/views/settings/components/RotationStrategyCard.vue
+++ b/frontend/src/views/settings/components/RotationStrategyCard.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { rotationOptions } from '../constants'
 import type { SmartSchedulingConfig } from '@/api'
-import { BaseCard, BaseIconButton } from '@codex-proxy/ui'
+import { ZCard, ZIconButton } from '@codex-proxy/ui'
 import { Settings2 } from '@lucide/vue'
 import { isEqual } from 'es-toolkit'
 import { computed, shallowRef } from 'vue'
@@ -23,7 +23,7 @@ const customized = computed(() => smartScheduling.value && props.smartDefaults &
 </script>
 
 <template>
-  <BaseCard title="调度策略">
+  <ZCard title="调度策略">
     <div class="grid max-w-6xl gap-3 sm:grid-cols-2 lg:grid-cols-4">
       <div
         v-for="option in options"
@@ -60,19 +60,19 @@ const customized = computed(() => smartScheduling.value && props.smartDefaults &
             {{ option.description }}
           </span>
         </button>
-        <BaseIconButton
+        <ZIconButton
           v-if="option.value === 'smart'"
           class="absolute top-3 right-3 size-6! rounded-cp-sm p-0"
-          label="智能调度设置"
-          size="sm"
+          aria-label="智能调度设置"
+          size="small"
           :disabled="disabled || !smartScheduling || !smartDefaults"
           @click="settingsOpen = true"
         >
           <Settings2 class="size-3.5" />
-        </BaseIconButton>
+        </ZIconButton>
       </div>
     </div>
-  </BaseCard>
+  </ZCard>
   <SmartSchedulingModal
     v-if="smartScheduling && smartDefaults"
     v-model="settingsOpen"
diff --git a/frontend/src/views/settings/components/SettingsAccessSection.vue b/frontend/src/views/settings/components/SettingsAccessSection.vue
index 013d348f3..718769b78 100644
--- a/frontend/src/views/settings/components/SettingsAccessSection.vue
+++ b/frontend/src/views/settings/components/SettingsAccessSection.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { BaseConfirmModal } from '@codex-proxy/ui'
+import { ZConfirmDialog } from '@codex-proxy/ui'
 import { onMounted } from 'vue'
 import { useAdminApiKey } from '../composables/useAdminApiKey'
 import AdminApiKeyCard from './AdminApiKeyCard.vue'
@@ -60,7 +60,7 @@ onMounted(loadStatus)
       <ResponseBodyLimitCard v-model="responsesMaxDecompressedBodyMiB" />
     </fieldset>
 
-    <BaseConfirmModal
+    <ZConfirmDialog
       v-model="showDeleteModal"
       title="删除管理员 API Key"
       description="删除后外部系统将无法继续使用该 Key 调用管理接口"
@@ -72,6 +72,6 @@ onMounted(loadStatus)
       <p class="m-0">
         确定要删除当前管理员 API Key 吗？此操作会立即生效
       </p>
-    </BaseConfirmModal>
+    </ZConfirmDialog>
   </div>
 </template>
diff --git a/frontend/src/views/settings/components/SmartSchedulingModal.vue b/frontend/src/views/settings/components/SmartSchedulingModal.vue
index ea68f2088..22afd613e 100644
--- a/frontend/src/views/settings/components/SmartSchedulingModal.vue
+++ b/frontend/src/views/settings/components/SmartSchedulingModal.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { SmartSchedulingConfig } from '@/api'
-import { BaseButton, BaseFormItem, BaseIconButton, BaseInput, BaseModal, BasePopover, BaseSwitch } from '@codex-proxy/ui'
+import { ZButton, ZDialog, ZFormItem, ZIconButton, ZInput, ZPopover, ZSwitch } from '@codex-proxy/ui'
 import { CircleAlert, CircleHelp } from '@lucide/vue'
 import { computed, reactive, shallowRef, useId, watch } from 'vue'
 
@@ -59,7 +59,7 @@ function confirm() {
 </script>
 
 <template>
-  <BaseModal v-model="open" title="智能调度设置" description="调整账号选择偏好与回切方式" size="md">
+  <ZDialog v-model="open" title="智能调度设置" description="调整账号选择偏好与回切方式" width="36rem">
     <form :id="formId" class="grid gap-5" novalidate @submit.prevent="confirm">
       <p v-if="!active" class="m-0 text-cp text-cp-text-secondary">
         仅在启用智能调度后生效
@@ -69,22 +69,22 @@ function confirm() {
           评分系数
         </legend>
         <div class="grid gap-4 sm:grid-cols-2">
-          <BaseFormItem v-for="field in fields" :key="field.key" :error="submitted ? errors[field.key] : undefined">
+          <ZFormItem v-for="field in fields" :key="field.key" :error="submitted ? errors[field.key] : undefined">
             <template #label>
               <span class="inline-flex items-center gap-1">
                 {{ field.label }}
-                <BasePopover trigger="hover-click" placement="top-start">
-                  <template #trigger="{ open: helpOpen }">
-                    <BaseIconButton :label="`${field.label}说明`" :title="undefined" :aria-expanded="helpOpen" class="size-6! hover:bg-transparent! active:bg-transparent!">
+                <ZPopover trigger="hover-click" placement="top-start">
+                  <template #reference="{ open: helpOpen }">
+                    <ZIconButton :aria-label="`${field.label}说明`" :title="undefined" :aria-expanded="helpOpen" class="size-6! hover:bg-transparent! active:bg-transparent!">
                       <CircleHelp class="size-3.5" />
-                    </BaseIconButton>
+                    </ZIconButton>
                   </template>
                   <p class="m-0 max-w-64 px-3 py-2 text-cp-sm leading-relaxed">{{ field.help }}</p>
-                </BasePopover>
+                </ZPopover>
               </span>
             </template>
-            <BaseInput v-model="draft[field.key]" type="number" min="0" max="10" step="0.1" placeholder="0 表示不参与评分" :aria-label="field.label" />
-          </BaseFormItem>
+            <ZInput v-model="draft[field.key]" type="number" min="0" max="10" step="0.1" placeholder="0 表示不参与评分" :aria-label="field.label" />
+          </ZFormItem>
         </div>
         <p v-if="submitted && emptyWeights" role="alert" class="mt-2 mb-0 text-cp-sm text-cp-danger">
           至少一项评分系数需要大于 0
@@ -94,31 +94,31 @@ function confirm() {
         <legend class="mb-3 text-cp font-emphasis">
           <span class="inline-flex items-center gap-1">
             回切行为
-            <BasePopover trigger="hover-click" placement="top-start">
-              <template #trigger="{ open: helpOpen }">
-                <BaseIconButton label="回切行为说明" :title="undefined" :aria-expanded="helpOpen" class="size-6! hover:bg-transparent! active:bg-transparent!">
+            <ZPopover trigger="hover-click" placement="top-start">
+              <template #reference="{ open: helpOpen }">
+                <ZIconButton aria-label="回切行为说明" :title="undefined" :aria-expanded="helpOpen" class="size-6! hover:bg-transparent! active:bg-transparent!">
                   <CircleAlert class="size-3.5" />
-                </BaseIconButton>
+                </ZIconButton>
               </template>
               <p class="m-0 max-w-72 px-3 py-2 text-cp-sm leading-relaxed">
                 高权重账号恢复可用后，后续允许重新选号的请求优先回切<br>原生续写仍绑定原账号，同权重账号保留已有会话亲和
               </p>
-            </BasePopover>
+            </ZPopover>
           </span>
         </legend>
-        <BaseSwitch v-model="draft.preferHigherWeight" label="自动回切" show-label />
+        <ZSwitch v-model="draft.preferHigherWeight" label="自动回切" />
       </fieldset>
     </form>
     <template #footer>
-      <BaseButton class="mr-auto" variant="secondary" @click="replaceDraft(defaults)">
+      <ZButton class="mr-auto" @click="replaceDraft(defaults)">
         恢复默认
-      </BaseButton>
-      <BaseButton variant="secondary" @click="open = false">
+      </ZButton>
+      <ZButton @click="open = false">
         取消
-      </BaseButton>
-      <BaseButton type="submit" :form="formId" variant="primary">
+      </ZButton>
+      <ZButton native-type="submit" :form="formId" type="primary">
         确定
-      </BaseButton>
+      </ZButton>
     </template>
-  </BaseModal>
+  </ZDialog>
 </template>
diff --git a/frontend/src/views/settings/components/TokenRefreshCard.vue b/frontend/src/views/settings/components/TokenRefreshCard.vue
index a840c84f3..11353fe98 100644
--- a/frontend/src/views/settings/components/TokenRefreshCard.vue
+++ b/frontend/src/views/settings/components/TokenRefreshCard.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { BaseCard, BaseForm, BaseFormItem, BaseInput } from '@codex-proxy/ui'
+import { ZCard, ZForm, ZFormItem, ZInput } from '@codex-proxy/ui'
 import { Timer, Zap } from '@lucide/vue'
 
 const refreshMarginSeconds = defineModel<string>('refreshMarginSeconds', { required: true })
@@ -7,22 +7,22 @@ const refreshConcurrency = defineModel<string>('refreshConcurrency', { required:
 </script>
 
 <template>
-  <BaseCard title="凭据刷新">
-    <BaseForm class="max-w-6xl sm:grid-cols-2">
-      <BaseFormItem label="提前刷新时间（秒）" description="访问令牌到期前提前触发自动刷新的时间">
-        <BaseInput v-model="refreshMarginSeconds" aria-label="提前刷新时间（秒）" type="number">
+  <ZCard title="凭据刷新">
+    <ZForm class="max-w-6xl sm:grid-cols-2">
+      <ZFormItem label="提前刷新时间（秒）" description="访问令牌到期前提前触发自动刷新的时间">
+        <ZInput v-model="refreshMarginSeconds" aria-label="提前刷新时间（秒）" type="number">
           <template #prefix>
             <Timer class="size-4" />
           </template>
-        </BaseInput>
-      </BaseFormItem>
-      <BaseFormItem label="刷新并发上限" description="同时执行凭据刷新的最大请求数，降低上限可减少限流风险">
-        <BaseInput v-model="refreshConcurrency" aria-label="刷新并发上限" type="number">
+        </ZInput>
+      </ZFormItem>
+      <ZFormItem label="刷新并发上限" description="同时执行凭据刷新的最大请求数，降低上限可减少限流风险">
+        <ZInput v-model="refreshConcurrency" aria-label="刷新并发上限" type="number">
           <template #prefix>
             <Zap class="size-4" />
           </template>
-        </BaseInput>
-      </BaseFormItem>
-    </BaseForm>
-  </BaseCard>
+        </ZInput>
+      </ZFormItem>
+    </ZForm>
+  </ZCard>
 </template>
diff --git a/frontend/src/views/settings/components/backup/BackupRecordsCard.vue b/frontend/src/views/settings/components/backup/BackupRecordsCard.vue
index 12a1e97df..67d98410c 100644
--- a/frontend/src/views/settings/components/backup/BackupRecordsCard.vue
+++ b/frontend/src/views/settings/components/backup/BackupRecordsCard.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { BackupRecord } from '@/api'
 
-import { BaseButton, BaseCard, BaseConfirmModal, BaseIconButton, BaseTable, BaseTablePagination, defineTableColumns } from '@codex-proxy/ui'
+import { defineTableColumns, ZButton, ZCard, ZConfirmDialog, ZIconButton, ZPagination, ZTable } from '@codex-proxy/ui'
 import { Download, Play, RefreshCw, Trash2 } from '@lucide/vue'
 
 import BackupStatusBadge from './BackupStatusBadge.vue'
@@ -84,14 +84,14 @@ function canDelete(record: BackupRecord): boolean {
 </script>
 
 <template>
-  <BaseCard
+  <ZCard
     title="备份记录"
     description="创建手动备份和管理已有备份记录"
   >
     <template #actions>
       <div class="flex flex-wrap items-center gap-2">
-        <BaseButton
-          variant="primary"
+        <ZButton
+          type="primary"
           :loading="creating"
           :disabled="loading || activeBackup"
           @click="emit('create')"
@@ -100,9 +100,8 @@ function canDelete(record: BackupRecord): boolean {
             <Play class="size-4" />
           </template>
           {{ creating ? '创建中...' : '创建备份' }}
-        </BaseButton>
-        <BaseButton
-          variant="secondary"
+        </ZButton>
+        <ZButton
           :loading="refreshing"
           :disabled="loading"
           @click="emit('refresh')"
@@ -114,15 +113,15 @@ function canDelete(record: BackupRecord): boolean {
             <RefreshCw class="size-4" />
           </template>
           刷新
-        </BaseButton>
+        </ZButton>
       </div>
     </template>
 
     <div class="flex min-h-0 flex-1 flex-col">
-      <BaseTable
+      <ZTable
         class="min-h-0 flex-1"
         :columns="columns"
-        :rows="records"
+        :data="records"
         row-key="id"
         :loading="loading"
         empty-text="暂无备份记录"
@@ -149,7 +148,7 @@ function canDelete(record: BackupRecord): boolean {
           </span>
         </template>
 
-        <template #trigger="{ row }">
+        <template #reference="{ row }">
           <span class="text-cp-text-secondary">
             {{ triggerLabel(row.triggerKind) }}
           </span>
@@ -163,35 +162,33 @@ function canDelete(record: BackupRecord): boolean {
 
         <template #actions="{ row }">
           <div class="flex items-center justify-start gap-1">
-            <BaseIconButton
-              variant="ghost"
+            <ZIconButton
               :disabled="!canDownload(row)"
               :loading="Boolean(downloadStates[row.id])"
-              label="下载备份"
+              aria-label="下载备份"
               @click="emit('download', row)"
             >
               <Download class="size-4" />
-            </BaseIconButton>
-            <BaseIconButton
-              variant="ghost"
+            </ZIconButton>
+            <ZIconButton
               :disabled="!canDelete(row)"
-              label="删除备份"
+              aria-label="删除备份"
               @click="emit('requestDelete', row)"
             >
               <Trash2 class="size-4" />
-            </BaseIconButton>
+            </ZIconButton>
           </div>
         </template>
-      </BaseTable>
-      <BaseTablePagination
-        :pagination="{ currentPage: page, pageSize, total }"
-        :loading="loading"
-        @page-change="emit('pageChange', $event)"
-        @page-size-change="emit('pageSizeChange', $event)"
+      </ZTable>
+      <ZPagination
+        v-bind="{ currentPage: page, pageSize, total }"
+        :disabled="loading"
+        @current-change="emit('pageChange', $event)"
+        @size-change="emit('pageSizeChange', $event)"
       />
     </div>
 
-    <BaseConfirmModal
+    <ZConfirmDialog
       v-model="deleteOpen"
       title="删除备份"
       description="将删除远端对象并移除记录，此操作不可撤销"
@@ -203,6 +200,6 @@ function canDelete(record: BackupRecord): boolean {
       <p class="m-0">
         确定要删除备份 <span class="font-emphasis">{{ deleteTarget?.id }}</span> 吗？
       </p>
-    </BaseConfirmModal>
-  </BaseCard>
+    </ZConfirmDialog>
+  </ZCard>
 </template>
diff --git a/frontend/src/views/settings/components/backup/BackupScheduleCard.vue b/frontend/src/views/settings/components/backup/BackupScheduleCard.vue
index 01e6d0f46..680b43b86 100644
--- a/frontend/src/views/settings/components/backup/BackupScheduleCard.vue
+++ b/frontend/src/views/settings/components/backup/BackupScheduleCard.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { BaseButton, BaseCard, BaseCheckbox, BaseForm, BaseFormItem, BaseInput } from '@codex-proxy/ui'
+import { ZButton, ZCard, ZCheckbox, ZForm, ZFormItem, ZInput } from '@codex-proxy/ui'
 
 import { CalendarClock, Save } from '@lucide/vue'
 
@@ -28,52 +28,51 @@ function updateSchedule<Key extends keyof ScheduleForm>(key: Key, value: Schedul
 </script>
 
 <template>
-  <BaseCard
+  <ZCard
     title="备份计划"
     description="配置自动备份的执行时间与保留策略"
   >
     <template #actions>
-      <BaseButton variant="primary" :loading="saving" :disabled="disabled" @click="emit('save')">
+      <ZButton type="primary" :loading="saving" :disabled="disabled" @click="emit('save')">
         <template #icon>
           <Save class="size-4" />
         </template>
         {{ saving ? '保存中...' : '保存' }}
-      </BaseButton>
+      </ZButton>
     </template>
 
     <div class="@container">
-      <BaseForm class="max-w-6xl @min-[640px]:grid-cols-2">
+      <ZForm class="max-w-6xl @min-[640px]:grid-cols-2">
         <div class="col-span-2 flex items-center gap-4 @max-[640px]:col-span-1">
-          <BaseCheckbox
+          <ZCheckbox
             :model-value="schedule.scheduleEnabled" :disabled="disabled || !storageReady"
             label="启用定时备份"
-            show-label
             @update:model-value="updateSchedule('scheduleEnabled', $event)"
           />
         </div>
 
-        <BaseFormItem
+        <ZFormItem
           label="Cron 表达式"
           description="5 段格式，例如 0 2 * * * 表示每天凌晨 2 点"
         >
-          <BaseInput :model-value="schedule.cronExpression" :disabled="disabled" aria-label="Cron 表达式" @update:model-value="updateSchedule('cronExpression', $event)">
+          <ZInput :model-value="schedule.cronExpression" :disabled="disabled" aria-label="Cron 表达式" @update:model-value="updateSchedule('cronExpression', $event)">
             <template #prefix>
               <CalendarClock class="size-4" />
             </template>
-          </BaseInput>
-        </BaseFormItem>
+          </ZInput>
+        </ZFormItem>
 
-        <BaseFormItem label="保留天数" description="超过此天数自动删除，0 表示不按天数清理，仍受最大保留份数限制">
-          <BaseInput :model-value="schedule.retentionDays" :disabled="disabled" aria-label="备份保留天数" type="number" min="0" @update:model-value="updateSchedule('retentionDays', $event)" />
-        </BaseFormItem>
+        <ZFormItem label="保留天数" description="超过此天数自动删除，0 表示不按天数清理，仍受最大保留份数限制">
+          <ZInput :model-value="schedule.retentionDays" :disabled="disabled" aria-label="备份保留天数" type="number" min="0" @update:model-value="updateSchedule('retentionDays', $event)" />
+        </ZFormItem>
 
-        <BaseFormItem
+        <ZFormItem
           label="最大保留份数"
           description="最多保留的备份数量，0 表示不按份数清理，仍受保留天数限制"
         >
-          <BaseInput :model-value="schedule.retentionCount" :disabled="disabled" aria-label="最大保留份数" type="number" min="0" @update:model-value="updateSchedule('retentionCount', $event)" />
-        </BaseFormItem>
-      </BaseForm>
+          <ZInput :model-value="schedule.retentionCount" :disabled="disabled" aria-label="最大保留份数" type="number" min="0" @update:model-value="updateSchedule('retentionCount', $event)" />
+        </ZFormItem>
+      </ZForm>
     </div>
-  </BaseCard>
+  </ZCard>
 </template>
diff --git a/frontend/src/views/settings/components/backup/BackupStorageCard.vue b/frontend/src/views/settings/components/backup/BackupStorageCard.vue
index 680d00107..afc1b084a 100644
--- a/frontend/src/views/settings/components/backup/BackupStorageCard.vue
+++ b/frontend/src/views/settings/components/backup/BackupStorageCard.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
-import { BaseButton, BaseCard, BaseCheckbox, BaseForm, BaseFormItem, BaseIconButton, BaseInput } from '@codex-proxy/ui'
+import { ZButton, ZCard, ZCheckbox, ZForm, ZFormItem, ZInput } from '@codex-proxy/ui'
 
-import { CircleAlert, CircleCheck, DatabaseZap, Eye, EyeOff, Save } from '@lucide/vue'
-import { computed, shallowRef } from 'vue'
+import { CircleAlert, CircleCheck, DatabaseZap, Save } from '@lucide/vue'
 
 interface StorageForm {
   endpoint: string
@@ -29,27 +28,13 @@ const emit = defineEmits<{
 
 const storage = defineModel<StorageForm>('storage', { required: true })
 
-// 凭据字段默认掩码显示，点击眼睛切换明文。
-const accessKeyVisible = shallowRef(false)
-const secretVisible = shallowRef(false)
-const accessKeyInputType = computed(() => (accessKeyVisible.value ? 'text' : 'password'))
-const secretInputType = computed(() => (secretVisible.value ? 'text' : 'password'))
-
-function toggleAccessKeyVisible(): void {
-  accessKeyVisible.value = !accessKeyVisible.value
-}
-
-function toggleSecretVisible(): void {
-  secretVisible.value = !secretVisible.value
-}
-
 function updateStorage<Key extends keyof StorageForm>(key: Key, value: StorageForm[Key]) {
   storage.value = { ...storage.value, [key]: value }
 }
 </script>
 
 <template>
-  <BaseCard title="S3 存储配置">
+  <ZCard title="S3 存储配置">
     <template #description>
       <span class="text-cp-text-secondary">
         配置 S3 兼容存储（支持
@@ -66,8 +51,7 @@ function updateStorage<Key extends keyof StorageForm>(key: Key, value: StorageFo
 
     <template #actions>
       <div class="flex flex-wrap items-center gap-2">
-        <BaseButton
-          variant="secondary"
+        <ZButton
           :loading="testing"
           :disabled="disabled"
           :title="verified ? '已通过连接测试' : '尚未通过连接测试'"
@@ -78,20 +62,20 @@ function updateStorage<Key extends keyof StorageForm>(key: Key, value: StorageFo
             <CircleAlert v-else class="size-4 text-cp-warning-text" />
           </template>
           {{ testing ? '测试中...' : '测试连接' }}
-        </BaseButton>
-        <BaseButton variant="primary" :loading="saving" :disabled="disabled" @click="emit('save')">
+        </ZButton>
+        <ZButton type="primary" :loading="saving" :disabled="disabled" @click="emit('save')">
           <template #icon>
             <Save class="size-4" />
           </template>
           {{ saving ? '保存中...' : '保存' }}
-        </BaseButton>
+        </ZButton>
       </div>
     </template>
 
     <div class="@container">
-      <BaseForm class="max-w-6xl @min-[640px]:grid-cols-2">
-        <BaseFormItem label="端点地址" description="S3 兼容服务的 HTTPS 地址">
-          <BaseInput
+      <ZForm class="max-w-6xl @min-[640px]:grid-cols-2">
+        <ZFormItem label="端点地址" description="S3 兼容服务的 HTTPS 地址">
+          <ZInput
             :model-value="storage.endpoint" :disabled="disabled"
             aria-label="端点地址"
             placeholder="https://<account_id>.r2.cloudflarestorage.com"
@@ -100,71 +84,45 @@ function updateStorage<Key extends keyof StorageForm>(key: Key, value: StorageFo
             <template #prefix>
               <DatabaseZap class="size-4" />
             </template>
-          </BaseInput>
-        </BaseFormItem>
+          </ZInput>
+        </ZFormItem>
 
-        <BaseFormItem label="区域" description="R2 使用固定值 auto，其它服务按提供方填写">
-          <BaseInput :model-value="storage.region" :disabled="disabled" aria-label="区域" @update:model-value="updateStorage('region', $event)" />
-        </BaseFormItem>
+        <ZFormItem label="区域" description="R2 使用固定值 auto，其它服务按提供方填写">
+          <ZInput :model-value="storage.region" :disabled="disabled" aria-label="区域" @update:model-value="updateStorage('region', $event)" />
+        </ZFormItem>
 
-        <BaseFormItem label="存储桶" description="私有存储桶名称">
-          <BaseInput :model-value="storage.bucket" :disabled="disabled" aria-label="存储桶" @update:model-value="updateStorage('bucket', $event)" />
-        </BaseFormItem>
+        <ZFormItem label="存储桶" description="私有存储桶名称">
+          <ZInput :model-value="storage.bucket" :disabled="disabled" aria-label="存储桶" @update:model-value="updateStorage('bucket', $event)" />
+        </ZFormItem>
 
-        <BaseFormItem label="对象键前缀" description="备份对象的存储路径前缀，不影响已有备份">
-          <BaseInput :model-value="storage.prefix" :disabled="disabled" aria-label="对象键前缀" @update:model-value="updateStorage('prefix', $event)" />
-        </BaseFormItem>
+        <ZFormItem label="对象键前缀" description="备份对象的存储路径前缀，不影响已有备份">
+          <ZInput :model-value="storage.prefix" :disabled="disabled" aria-label="对象键前缀" @update:model-value="updateStorage('prefix', $event)" />
+        </ZFormItem>
 
-        <BaseFormItem label="Access Key ID" description="对象存储专用凭据">
-          <BaseInput
+        <ZFormItem label="Access Key ID" description="对象存储专用凭据">
+          <ZInput
             :model-value="storage.accessKeyId" :disabled="disabled"
             aria-label="Access Key ID"
-            :type="accessKeyInputType"
+            show-password
             autocomplete="off"
             @update:model-value="updateStorage('accessKeyId', $event)"
-          >
-            <template #suffix>
-              <BaseIconButton
-                variant="ghost"
-                size="sm"
-                :label="accessKeyVisible ? '隐藏 Access Key ID' : '显示 Access Key ID'"
-                @mousedown.prevent
-                @click="toggleAccessKeyVisible"
-              >
-                <EyeOff v-if="accessKeyVisible" :size="16" />
-                <Eye v-else :size="16" />
-              </BaseIconButton>
-            </template>
-          </BaseInput>
-        </BaseFormItem>
+          />
+        </ZFormItem>
 
-        <BaseFormItem label="Secret Access Key" description="对象存储专用 Secret">
-          <BaseInput
+        <ZFormItem label="Secret Access Key" description="对象存储专用 Secret">
+          <ZInput
             :model-value="storage.secretAccessKey" :disabled="disabled"
             aria-label="Secret Access Key"
-            :type="secretInputType"
+            show-password
             autocomplete="new-password"
             @update:model-value="updateStorage('secretAccessKey', $event)"
-          >
-            <template #suffix>
-              <BaseIconButton
-                variant="ghost"
-                size="sm"
-                :label="secretVisible ? '隐藏 Secret Access Key' : '显示 Secret Access Key'"
-                @mousedown.prevent
-                @click="toggleSecretVisible"
-              >
-                <EyeOff v-if="secretVisible" :size="16" />
-                <Eye v-else :size="16" />
-              </BaseIconButton>
-            </template>
-          </BaseInput>
-        </BaseFormItem>
+          />
+        </ZFormItem>
 
         <div class="col-span-2 flex items-center gap-4 @max-[640px]:col-span-1">
-          <BaseCheckbox :model-value="storage.forcePathStyle" :disabled="disabled" label="强制路径式访问" show-label @update:model-value="updateStorage('forcePathStyle', $event)" />
+          <ZCheckbox :model-value="storage.forcePathStyle" :disabled="disabled" label="强制路径式访问" @update:model-value="updateStorage('forcePathStyle', $event)" />
         </div>
-      </BaseForm>
+      </ZForm>
     </div>
-  </BaseCard>
+  </ZCard>
 </template>
diff --git a/frontend/src/views/settings/components/backup/R2GuideModal.vue b/frontend/src/views/settings/components/backup/R2GuideModal.vue
index ce480f194..4af2b296b 100644
--- a/frontend/src/views/settings/components/backup/R2GuideModal.vue
+++ b/frontend/src/views/settings/components/backup/R2GuideModal.vue
@@ -1,14 +1,14 @@
 <script setup lang="ts">
-import { BaseButton, BaseModal } from '@codex-proxy/ui'
+import { ZButton, ZDialog } from '@codex-proxy/ui'
 
 const open = defineModel<boolean>({ default: false })
 </script>
 
 <template>
-  <BaseModal
+  <ZDialog
     v-model="open"
     title="Cloudflare R2 接入指南"
-    size="lg"
+    width="48rem"
   >
     <div class="flex flex-col gap-4 text-cp leading-relaxed text-cp-text-secondary">
       <section class="flex flex-col gap-1.5">
@@ -62,9 +62,9 @@ const open = defineModel<boolean>({ default: false })
     </div>
 
     <template #footer>
-      <BaseButton variant="primary" @click="open = false">
+      <ZButton type="primary" @click="open = false">
         知道了
-      </BaseButton>
+      </ZButton>
     </template>
-  </BaseModal>
+  </ZDialog>
 </template>
diff --git a/frontend/src/views/settings/components/client-version/components/ClientDesktopOfflineDownloads.vue b/frontend/src/views/settings/components/client-version/components/ClientDesktopOfflineDownloads.vue
index 682a78097..1cbea04a5 100644
--- a/frontend/src/views/settings/components/client-version/components/ClientDesktopOfflineDownloads.vue
+++ b/frontend/src/views/settings/components/client-version/components/ClientDesktopOfflineDownloads.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { ClientDownloadPackage, CodexDesktopWindowsDownloads } from '@/api'
-import { BaseButton, BaseEmpty, BaseIconButton, BaseSkeleton } from '@codex-proxy/ui'
+import { ZButton, ZEmpty, ZIconButton, ZSkeleton } from '@codex-proxy/ui'
 
 import { ArrowDownToLine, PackageOpen, RefreshCw } from '@lucide/vue'
 
@@ -75,15 +75,14 @@ function formatFileSize(value: number | null): string {
           </p>
         </div>
       </div>
-      <BaseIconButton
-        :label="loading ? '正在重新提取离线下载链接' : '重新提取离线下载链接'"
-        variant="secondary"
+      <ZIconButton
+        :aria-label="loading ? '正在重新提取离线下载链接' : '重新提取离线下载链接'" variant="solid"
         :disabled="loading"
         :aria-busy="loading || undefined"
         @click="emit('refresh')"
       >
         <RefreshCw class="size-4" :class="loading && 'animate-spin motion-reduce:animate-none'" />
-      </BaseIconButton>
+      </ZIconButton>
     </div>
 
     <p
@@ -103,25 +102,25 @@ function formatFileSize(value: number | null): string {
 
     <div v-if="loading && !downloads" class="grid gap-3 sm:grid-cols-2" aria-label="正在提取离线安装包">
       <div v-for="index in 2" :key="index" class="grid gap-3 rounded-cp bg-cp-bg-container p-4 shadow-cp-tertiary">
-        <BaseSkeleton class="h-4 w-28" />
-        <BaseSkeleton class="h-3 w-44" shape="text" />
-        <BaseSkeleton class="h-9 w-full" />
+        <ZSkeleton class="h-4 w-28" />
+        <ZSkeleton class="h-3 w-44" shape="text" />
+        <ZSkeleton class="h-9 w-full" />
       </div>
     </div>
 
-    <BaseEmpty
+    <ZEmpty
       v-else-if="error && !downloads"
       title="离线安装包加载失败"
       :description="error"
       :icon="PackageOpen"
-      size="sm"
+      size="small"
     >
       <template #action>
-        <BaseButton size="sm" :loading="loading" @click="emit('retry')">
+        <ZButton size="small" :loading="loading" @click="emit('retry')">
           重试
-        </BaseButton>
+        </ZButton>
       </template>
-    </BaseEmpty>
+    </ZEmpty>
 
     <div v-else-if="downloads" class="grid gap-3 sm:grid-cols-2">
       <article
diff --git a/frontend/src/views/settings/components/client-version/components/ClientInstallCommandList.vue b/frontend/src/views/settings/components/client-version/components/ClientInstallCommandList.vue
index 9dbc3bf97..da260eccd 100644
--- a/frontend/src/views/settings/components/client-version/components/ClientInstallCommandList.vue
+++ b/frontend/src/views/settings/components/client-version/components/ClientInstallCommandList.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { BaseIconButton } from '@codex-proxy/ui'
+import { ZIconButton } from '@codex-proxy/ui'
 
 import { Copy } from '@lucide/vue'
 import { useCopyText } from '@/composables/useCopyText'
@@ -31,11 +31,11 @@ function copyCommand(command: string) {
         <p class="m-0 text-cp-xs font-heavy text-cp-text-quaternary">
           {{ item.label }}
         </p>
-        <code class="mt-1.5 block overflow-x-auto whitespace-nowrap font-mono text-cp-sm leading-[1.5] font-semibold text-cp-text">{{ item.command }}</code>
+        <code class="mt-1.5 block overflow-x-auto whitespace-nowrap font-mono text-cp-sm leading-normal font-semibold text-cp-text">{{ item.command }}</code>
       </div>
-      <BaseIconButton size="sm" label="复制命令" @click="copyCommand(item.command)">
+      <ZIconButton size="small" aria-label="复制命令" @click="copyCommand(item.command)">
         <Copy class="size-3.5" />
-      </BaseIconButton>
+      </ZIconButton>
     </article>
   </div>
 </template>
diff --git a/frontend/src/views/settings/components/client-version/components/ClientVersionGuideModal.vue b/frontend/src/views/settings/components/client-version/components/ClientVersionGuideModal.vue
index e190959de..82e62b94f 100644
--- a/frontend/src/views/settings/components/client-version/components/ClientVersionGuideModal.vue
+++ b/frontend/src/views/settings/components/client-version/components/ClientVersionGuideModal.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { CodexDesktopWindowsDownloads } from '@/api'
-import { BaseButton, BaseModal, BaseSegmented } from '@codex-proxy/ui'
+import { ZButton, ZDialog, ZSegmented } from '@codex-proxy/ui'
 
 import { MonitorUp, PackageOpen, TerminalSquare } from '@lucide/vue'
 import { shallowRef } from 'vue'
@@ -39,23 +39,23 @@ const sectionOptions = [
 </script>
 
 <template>
-  <BaseModal
+  <ZDialog
     v-model="open"
     title="Codex 客户端升级"
     description="先选择客户端，再查看对应的安装与升级方式"
-    tone="info"
-    size="lg"
+    type="info"
+    width="48rem"
   >
     <template #icon>
       <PackageOpen class="size-4.5 text-cp-info" />
     </template>
 
     <div class="grid gap-4">
-      <BaseSegmented
+      <ZSegmented
         v-model="activeSection"
-        label="客户端类型"
+        aria-label="客户端类型"
         :options="sectionOptions"
-        size="lg"
+        size="large"
         class="w-full"
       />
 
@@ -71,9 +71,9 @@ const sectionOptions = [
     </div>
 
     <template #footer>
-      <BaseButton variant="primary" @click="open = false">
+      <ZButton type="primary" @click="open = false">
         关闭
-      </BaseButton>
+      </ZButton>
     </template>
-  </BaseModal>
+  </ZDialog>
 </template>
diff --git a/frontend/src/views/settings/components/client-version/components/ClientVersionPolicyCard.vue b/frontend/src/views/settings/components/client-version/components/ClientVersionPolicyCard.vue
index f61213c00..fca870181 100644
--- a/frontend/src/views/settings/components/client-version/components/ClientVersionPolicyCard.vue
+++ b/frontend/src/views/settings/components/client-version/components/ClientVersionPolicyCard.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { BaseCard, BaseForm, BaseFormItem, BaseIconButton, BaseInput } from '@codex-proxy/ui'
+import { ZCard, ZForm, ZFormItem, ZIconButton, ZInput } from '@codex-proxy/ui'
 
 import { CircleHelp, MonitorUp, TerminalSquare } from '@lucide/vue'
 
@@ -27,28 +27,28 @@ const minCodexCliVersion = defineModel<string>('minCodexCliVersion', { required:
 </script>
 
 <template>
-  <BaseCard>
+  <ZCard>
     <template #title>
       <span class="inline-flex items-center gap-1.5">
         <span>客户端版本限制</span>
-        <BaseIconButton
-          label="查看安装与升级说明"
+        <ZIconButton
+          aria-label="查看安装与升级说明"
           :title="undefined"
           class="size-6! hover:bg-transparent! active:bg-transparent!"
           @click="emit('help')"
         >
           <CircleHelp class="size-3.5" aria-hidden="true" />
-        </BaseIconButton>
+        </ZIconButton>
       </span>
     </template>
 
-    <BaseForm class="max-w-6xl sm:grid-cols-2">
-      <BaseFormItem
+    <ZForm class="max-w-6xl sm:grid-cols-2">
+      <ZFormItem
         label="Codex Desktop 最低版本"
         description="只检查桌面端应用版本，例如 26.825.51511"
         :error="desktopError"
       >
-        <BaseInput
+        <ZInput
           v-model="minCodexDesktopVersion"
           aria-label="Codex Desktop 最低版本"
           autocomplete="off"
@@ -59,15 +59,15 @@ const minCodexCliVersion = defineModel<string>('minCodexCliVersion', { required:
           <template #prefix>
             <MonitorUp class="size-4" />
           </template>
-        </BaseInput>
-      </BaseFormItem>
+        </ZInput>
+      </ZFormItem>
 
-      <BaseFormItem
+      <ZFormItem
         label="Codex CLI 最低版本"
         description="只检查独立终端版本，例如 0.152.0"
         :error="cliError"
       >
-        <BaseInput
+        <ZInput
           v-model="minCodexCliVersion"
           aria-label="Codex CLI 最低版本"
           autocomplete="off"
@@ -78,8 +78,8 @@ const minCodexCliVersion = defineModel<string>('minCodexCliVersion', { required:
           <template #prefix>
             <TerminalSquare class="size-4" />
           </template>
-        </BaseInput>
-      </BaseFormItem>
-    </BaseForm>
-  </BaseCard>
+        </ZInput>
+      </ZFormItem>
+    </ZForm>
+  </ZCard>
 </template>
diff --git a/frontend/src/views/settings/components/privacy/PolicyPreview.vue b/frontend/src/views/settings/components/privacy/PolicyPreview.vue
index b0e6b50d0..55523eeef 100644
--- a/frontend/src/views/settings/components/privacy/PolicyPreview.vue
+++ b/frontend/src/views/settings/components/privacy/PolicyPreview.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { CodexPrivacyPolicy, PrivacySample } from '@/api/modules/settings/privacy'
-import { BaseButton, BaseFormItem, BaseModal, BaseTextarea } from '@codex-proxy/ui'
+import { ZButton, ZDialog, ZFormItem, ZTextarea } from '@codex-proxy/ui'
 import { computed, shallowRef, watch } from 'vue'
 import { usePrivacyPreview } from '../../composables/usePrivacyPreview'
 import { exampleRequest } from './presets'
@@ -29,12 +29,12 @@ async function test() {
 </script>
 
 <template>
-  <BaseModal v-model="open" title="测试规则" description="按草稿顺序执行已启用的规则，样本仅用于本次测试" size="lg">
+  <ZDialog v-model="open" title="测试规则" description="按草稿顺序执行已启用的规则，样本仅用于本次测试" width="48rem">
     <div class="grid gap-3">
       <div class="grid min-w-0 gap-3 sm:grid-cols-2">
-        <BaseFormItem label="请求样本">
-          <BaseTextarea v-model="sample" aria-label="请求样本" placeholder="粘贴包含 body、headers、turnMetadata 的请求 JSON" resize="none" maxlength="262144" size="sm" class="font-mono [&_textarea]:block [&_textarea]:h-64" spellcheck="false" />
-        </BaseFormItem>
+        <ZFormItem label="请求样本">
+          <ZTextarea v-model="sample" aria-label="请求样本" placeholder="粘贴包含 body、headers、turnMetadata 的请求 JSON" resize="none" maxlength="262144" size="small" class="font-mono [&_textarea]:block [&_textarea]:h-64" spellcheck="false" />
+        </ZFormItem>
         <div class="grid min-w-0 content-start gap-2">
           <span class="flex min-h-4 items-center text-cp leading-none font-medium text-cp-text-secondary">最终结果</span><pre class="cp-scrollbar m-0 h-64 overflow-auto rounded-cp bg-cp-fill-quaternary p-3 font-mono text-cp-xs break-all whitespace-pre-wrap">{{ output || '点击测试查看结果' }}</pre>
         </div>
@@ -50,11 +50,11 @@ async function test() {
       </p>
     </div>
     <template #footer>
-      <BaseButton size="sm" variant="secondary" @click="open = false">
+      <ZButton size="small" @click="open = false">
         关闭
-      </BaseButton><BaseButton size="sm" variant="primary" :loading="loading" @click="test">
+      </ZButton><ZButton size="small" type="primary" :loading="loading" @click="test">
         测试规则
-      </BaseButton>
+      </ZButton>
     </template>
-  </BaseModal>
+  </ZDialog>
 </template>
diff --git a/frontend/src/views/settings/components/privacy/PrivacyPolicyCard.vue b/frontend/src/views/settings/components/privacy/PrivacyPolicyCard.vue
index 8ad24f8f4..f28feb2a2 100644
--- a/frontend/src/views/settings/components/privacy/PrivacyPolicyCard.vue
+++ b/frontend/src/views/settings/components/privacy/PrivacyPolicyCard.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { CodexPrivacyPolicy, PrivacyRule } from '@/api/modules/settings/privacy'
-import { BaseButton, BaseCard, BaseIconButton, BaseMenuItem, BasePopover, BaseSelect, BaseSwitch } from '@codex-proxy/ui'
+import { ZButton, ZCard, ZIconButton, ZMenuItem, ZPopover, ZSelect, ZSwitch } from '@codex-proxy/ui'
 import { ChevronDown, CircleHelp, Play, Plus } from '@lucide/vue'
 import { shallowRef } from 'vue'
 import PolicyPreview from './PolicyPreview.vue'
@@ -54,49 +54,49 @@ function move(index: number, step: number) {
 </script>
 
 <template>
-  <BaseCard id="privacy-policy" title="Codex 隐私策略" description="按自定义规则替换或移除请求中的隐私信息">
+  <ZCard id="privacy-policy" title="Codex 隐私策略" description="按自定义规则替换或移除请求中的隐私信息">
     <template #actions>
-      <BaseSwitch v-model="model.enabled" label="启用请求规则" active-text="启用" inactive-text="关闭" inline-prompt :width="56" :disabled="disabled" />
+      <ZSwitch v-model="model.enabled" aria-label="启用请求规则" active-text="启用" inactive-text="关闭" inline-prompt :width="56" :disabled="disabled" />
     </template>
     <template #body>
       <div class="grid gap-3">
         <div class="flex flex-wrap items-center justify-between gap-2">
           <div class="flex flex-wrap items-center gap-2">
-            <BaseButton size="sm" variant="secondary" :disabled="disabled || model.rules.length >= 32" @click="add()">
+            <ZButton size="small" :disabled="disabled || model.rules.length >= 32" @click="add()">
               <template #icon>
                 <Plus class="size-3.5" />
               </template>添加规则
-            </BaseButton>
-            <BasePopover v-model="presetOpen" placement="bottom-start">
-              <template #trigger>
-                <BaseButton size="sm" variant="ghost" :disabled="disabled || model.rules.length >= 32">
+            </ZButton>
+            <ZPopover v-model="presetOpen" placement="bottom-start">
+              <template #reference>
+                <ZButton size="small" variant="text" :disabled="disabled || model.rules.length >= 32">
                   从预设添加<ChevronDown class="ml-1 size-3" />
-                </BaseButton>
+                </ZButton>
               </template>
               <div class="w-48 p-1.5">
-                <BaseMenuItem v-for="preset in presets" :key="preset.name" @click="add({ ...preset.values, name: preset.name })">
+                <ZMenuItem v-for="preset in presets" :key="preset.name" @click="add({ ...preset.values, name: preset.name })">
                   {{ preset.name }}
-                </BaseMenuItem>
+                </ZMenuItem>
               </div>
-            </BasePopover>
+            </ZPopover>
           </div>
-          <BaseButton size="sm" variant="ghost" :disabled="disabled" @click="testOpen = true">
+          <ZButton size="small" variant="text" :disabled="disabled" @click="testOpen = true">
             <template #icon>
               <Play class="size-3.5" />
             </template>测试规则
-          </BaseButton>
+          </ZButton>
         </div>
         <RulesTable :rules="model.rules" :disabled="disabled" @edit="edit($event)" @toggle="toggle" @duplicate="duplicate" @remove="remove" @move="move" />
         <div v-if="model.rules.length" class="flex flex-wrap items-center justify-between gap-x-4 gap-y-2">
           <span class="text-cp-xs text-cp-text-quaternary">按列表顺序执行</span>
           <div class="flex items-center gap-2">
             <span class="text-cp-xs text-cp-text-secondary">执行失败</span>
-            <BaseSelect v-model="model.onError" size="sm" class="w-34" :options="failureOptions" aria-label="规则执行失败" :disabled="disabled" />
-            <BasePopover trigger="hover-click" placement="top-end">
-              <template #trigger="{ open: helpOpen }">
-                <BaseIconButton size="sm" variant="ghost" label="规则执行说明" :title="undefined" class="hover:bg-transparent! active:bg-transparent!" :aria-expanded="helpOpen">
+            <ZSelect v-model="model.onError" size="small" class="w-34" :options="failureOptions" aria-label="规则执行失败" :disabled="disabled" />
+            <ZPopover trigger="hover-click" placement="top-end">
+              <template #reference="{ open: helpOpen }">
+                <ZIconButton size="small" aria-label="规则执行说明" :title="undefined" class="hover:bg-transparent! active:bg-transparent!" :aria-expanded="helpOpen">
                   <CircleHelp class="size-3.5" />
-                </BaseIconButton>
+                </ZIconButton>
               </template>
               <div class="max-w-72 space-y-2 p-3 text-cp-sm text-cp-text-secondary">
                 <p class="m-0">
@@ -105,12 +105,12 @@ function move(index: number, step: number) {
                   允许改写选定字段，认证、会话与工具行为的影响由配置者负责
                 </p>
               </div>
-            </BasePopover>
+            </ZPopover>
           </div>
         </div>
       </div>
     </template>
-  </BaseCard>
+  </ZCard>
   <RuleEditor v-model="editorOpen" :rule="selected" :is-new="isNew" :disabled="disabled" @apply="apply" />
   <PolicyPreview v-model="testOpen" :policy="model" />
 </template>
diff --git a/frontend/src/views/settings/components/privacy/RuleEditor.vue b/frontend/src/views/settings/components/privacy/RuleEditor.vue
index dfad5bb2a..59fc768a1 100644
--- a/frontend/src/views/settings/components/privacy/RuleEditor.vue
+++ b/frontend/src/views/settings/components/privacy/RuleEditor.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { PrivacyRule } from '@/api/modules/settings/privacy'
-import { BaseButton, BaseCheckbox, BaseForm, BaseFormItem, BaseIconButton, BaseInput, BaseModal, BasePopover, BaseSelect, BaseTextarea } from '@codex-proxy/ui'
+import { ZButton, ZCheckbox, ZDialog, ZForm, ZFormItem, ZIconButton, ZInput, ZPopover, ZSelect, ZTextarea } from '@codex-proxy/ui'
 import { CircleHelp, Play } from '@lucide/vue'
 import { cloneDeep } from 'es-toolkit'
 import { computed, ref, shallowRef, useId, watch } from 'vue'
@@ -110,64 +110,64 @@ async function apply() {
 </script>
 
 <template>
-  <BaseModal v-model="open" :title="isNew ? '添加规则' : '编辑规则'" size="md-wide">
+  <ZDialog v-model="open" :title="isNew ? '添加规则' : '编辑规则'" width="42rem">
     <div class="grid gap-4">
-      <BaseForm class="sm:grid-cols-2">
-        <BaseFormItem class="sm:col-span-2" label="规则名称" required>
-          <BaseInput v-model="draft.name" placeholder="例如：工作区仓库地址脱敏" aria-label="规则名称" maxlength="64" />
-        </BaseFormItem>
-        <BaseFormItem label="作用范围">
-          <BaseSelect v-model="draft.scope" class="w-full" :options="scopes" aria-label="作用范围" />
-        </BaseFormItem>
-        <BaseFormItem label="处理方式">
-          <BaseSelect v-model="draft.action" class="w-full" :options="actions" aria-label="处理方式" />
-        </BaseFormItem>
-        <BaseFormItem class="sm:col-span-2" :label="draft.scope === 'request_header' ? '请求头名称' : '字段路径'" required>
+      <ZForm class="sm:grid-cols-2">
+        <ZFormItem class="sm:col-span-2" label="规则名称" required>
+          <ZInput v-model="draft.name" placeholder="例如：工作区仓库地址脱敏" aria-label="规则名称" maxlength="64" />
+        </ZFormItem>
+        <ZFormItem label="作用范围">
+          <ZSelect v-model="draft.scope" class="w-full" :options="scopes" aria-label="作用范围" />
+        </ZFormItem>
+        <ZFormItem label="处理方式">
+          <ZSelect v-model="draft.action" class="w-full" :options="actions" aria-label="处理方式" />
+        </ZFormItem>
+        <ZFormItem class="sm:col-span-2" :label="draft.scope === 'request_header' ? '请求头名称' : '字段路径'" required>
           <template #label-extra>
-            <BasePopover trigger="hover-click">
-              <template #trigger="{ open: helpOpen }">
-                <BaseIconButton size="sm" variant="ghost" label="字段路径语法" :title="undefined" class="-my-2 hover:bg-transparent! active:bg-transparent!" :aria-expanded="helpOpen">
+            <ZPopover trigger="hover-click">
+              <template #reference="{ open: helpOpen }">
+                <ZIconButton size="small" aria-label="字段路径语法" :title="undefined" class="-my-2 hover:bg-transparent! active:bg-transparent!" :aria-expanded="helpOpen">
                   <CircleHelp class="size-3.5" />
-                </BaseIconButton>
+                </ZIconButton>
               </template>
               <div class="max-w-72 p-3 text-cp-sm text-cp-text-secondary">
                 支持对象成员、双引号键名、数组索引和 * 通配，例如 $["workspaces"]["/home/alex/demo"]<br>环境文本使用 $，请求头直接填写名称
               </div>
-            </BasePopover>
+            </ZPopover>
           </template>
           <div class="flex flex-wrap items-center gap-2 sm:flex-nowrap">
-            <BaseInput v-model="draft.selector" :placeholder="selectorPlaceholder" aria-label="字段路径" maxlength="1024" class="min-w-0 flex-1 font-mono" :class="fields.length ? 'basis-full sm:basis-auto' : undefined" spellcheck="false" />
-            <BaseSelect v-if="fields.length" :id="fieldPresetId" v-model="fieldChoice" class="min-w-0 flex-1 sm:w-40 sm:flex-none" :options="fields" aria-label="常用字段" />
+            <ZInput v-model="draft.selector" :placeholder="selectorPlaceholder" aria-label="字段路径" maxlength="1024" class="min-w-0 flex-1 font-mono" :class="fields.length ? 'basis-full sm:basis-auto' : undefined" spellcheck="false" />
+            <ZSelect v-if="fields.length" :id="fieldPresetId" v-model="fieldChoice" class="min-w-0 flex-1 sm:w-40 sm:flex-none" :options="fields" aria-label="常用字段" />
           </div>
-        </BaseFormItem>
-        <BaseCheckbox v-if="draft.action === 'remove_field'" v-model="conditional" class="sm:col-span-2" label="仅删除值匹配正则的字段或数组项" show-label />
-        <BaseFormItem v-if="usesPattern" :class="draft.action === 'remove_field' ? 'sm:col-span-2' : undefined" label="匹配表达式">
-          <BaseInput v-model="pattern" :placeholder="draft.action === 'rename_key' ? '例如：^/home/[^/]+/' : '例如：private-org'" aria-label="匹配表达式" maxlength="4096" spellcheck="false" class="font-mono" />
-        </BaseFormItem>
-        <BaseFormItem v-if="draft.action === 'regex_replace' || draft.action === 'rename_key'" label="替换内容">
+        </ZFormItem>
+        <ZCheckbox v-if="draft.action === 'remove_field'" v-model="conditional" class="sm:col-span-2" label="仅删除值匹配正则的字段或数组项" />
+        <ZFormItem v-if="usesPattern" :class="draft.action === 'remove_field' ? 'sm:col-span-2' : undefined" label="匹配表达式">
+          <ZInput v-model="pattern" :placeholder="draft.action === 'rename_key' ? '例如：^/home/[^/]+/' : '例如：private-org'" aria-label="匹配表达式" maxlength="4096" spellcheck="false" class="font-mono" />
+        </ZFormItem>
+        <ZFormItem v-if="draft.action === 'regex_replace' || draft.action === 'rename_key'" label="替换内容">
           <template #label-extra>
-            <BasePopover trigger="hover-click">
-              <template #trigger="{ open: helpOpen }">
-                <BaseIconButton size="sm" variant="ghost" label="正则语法说明" :title="undefined" class="-my-2 hover:bg-transparent! active:bg-transparent!" :aria-expanded="helpOpen">
+            <ZPopover trigger="hover-click">
+              <template #reference="{ open: helpOpen }">
+                <ZIconButton size="small" aria-label="正则语法说明" :title="undefined" class="-my-2 hover:bg-transparent! active:bg-transparent!" :aria-expanded="helpOpen">
                   <CircleHelp class="size-3.5" />
-                </BaseIconButton>
+                </ZIconButton>
               </template>
               <div class="max-w-72 p-3 text-cp-sm text-cp-text-secondary">
                 ${1} 或 ${name} 引用捕获组，$$ 表示字面 $<br>使用 Rust regex 语法，不支持前后顾和模式中的反向引用
               </div>
-            </BasePopover>
+            </ZPopover>
           </template>
-          <BaseInput v-model="draft.replacement" :placeholder="draft.action === 'rename_key' ? '例如：/home/user/' : '例如：team，留空则清除匹配内容'" aria-label="替换内容" maxlength="4096" spellcheck="false" class="font-mono" />
-        </BaseFormItem>
-        <BaseFormItem v-if="draft.action === 'set_value'" class="sm:col-span-2" label="固定值（JSON）">
-          <BaseTextarea v-model="fixedValue" placeholder="例如：&quot;匿名&quot;、null 或 {}" :rows="2" maxlength="4096" aria-label="固定值 JSON" class="font-mono" />
-        </BaseFormItem>
+          <ZInput v-model="draft.replacement" :placeholder="draft.action === 'rename_key' ? '例如：/home/user/' : '例如：team，留空则清除匹配内容'" aria-label="替换内容" maxlength="4096" spellcheck="false" class="font-mono" />
+        </ZFormItem>
+        <ZFormItem v-if="draft.action === 'set_value'" class="sm:col-span-2" label="固定值（JSON）">
+          <ZTextarea v-model="fixedValue" placeholder="例如：&quot;匿名&quot;、null 或 {}" :rows="2" maxlength="4096" aria-label="固定值 JSON" class="font-mono" />
+        </ZFormItem>
         <div v-if="usesPattern" class="flex flex-wrap gap-x-4 gap-y-2 sm:col-span-2">
-          <BaseCheckbox v-if="draft.action !== 'remove_field'" v-model="draft.replaceAll" label="替换全部匹配" show-label />
-          <BaseCheckbox v-model="draft.caseInsensitive" label="忽略大小写" show-label />
-          <BaseCheckbox v-model="draft.multiLine" label="多行匹配" show-label />
+          <ZCheckbox v-if="draft.action !== 'remove_field'" v-model="draft.replaceAll" label="替换全部匹配" />
+          <ZCheckbox v-model="draft.caseInsensitive" label="忽略大小写" />
+          <ZCheckbox v-model="draft.multiLine" label="多行匹配" />
         </div>
-      </BaseForm>
+      </ZForm>
       <section class="grid gap-2.5" aria-label="测试预览">
         <div class="flex items-center justify-between gap-3">
           <h3 class="m-0 text-cp-sm font-emphasis">
@@ -175,17 +175,17 @@ async function apply() {
           </h3>
           <div class="flex items-center gap-2">
             <span v-if="outcome" class="text-cp-xs text-cp-text-quaternary">{{ outcome.status === 'skipped' ? '规则已跳过' : `命中 ${outcome.matches} 处` }}</span>
-            <BaseButton size="sm" variant="ghost" :loading="loading" aria-label="测试本条规则" @click="test">
+            <ZButton size="small" variant="text" :loading="loading" aria-label="测试本条规则" @click="test">
               <template #icon>
                 <Play class="size-3.5" />
               </template>测试
-            </BaseButton>
+            </ZButton>
           </div>
         </div>
         <div class="grid min-w-0 gap-3 sm:grid-cols-2">
-          <BaseFormItem label="测试样本">
-            <BaseTextarea v-model="sample" size="sm" resize="none" placeholder="粘贴对应作用范围的样本内容" maxlength="262144" aria-label="测试样本" class="font-mono [&_textarea]:block [&_textarea]:h-36" spellcheck="false" />
-          </BaseFormItem>
+          <ZFormItem label="测试样本">
+            <ZTextarea v-model="sample" size="small" resize="none" placeholder="粘贴对应作用范围的样本内容" maxlength="262144" aria-label="测试样本" class="font-mono [&_textarea]:block [&_textarea]:h-36" spellcheck="false" />
+          </ZFormItem>
           <div class="grid min-w-0 content-start gap-2">
             <span class="flex min-h-4 items-center text-cp leading-none font-medium text-cp-text-secondary">处理后</span>
             <pre class="cp-scrollbar m-0 h-36 overflow-auto rounded-cp bg-cp-fill-quaternary p-3 font-mono text-cp-xs break-all whitespace-pre-wrap" data-preview-output>{{ processed || '点击测试查看结果' }}</pre>
@@ -197,12 +197,12 @@ async function apply() {
       </section>
     </div>
     <template #footer>
-      <BaseButton size="sm" variant="secondary" @click="open = false">
+      <ZButton size="small" @click="open = false">
         取消
-      </BaseButton>
-      <BaseButton size="sm" variant="primary" :loading="loading" :disabled="disabled" @click="apply">
+      </ZButton>
+      <ZButton size="small" type="primary" :loading="loading" :disabled="disabled" @click="apply">
         应用到草稿
-      </BaseButton>
+      </ZButton>
     </template>
-  </BaseModal>
+  </ZDialog>
 </template>
diff --git a/frontend/src/views/settings/components/privacy/RulesTable.vue b/frontend/src/views/settings/components/privacy/RulesTable.vue
index 4e7cbbf57..0cd843fd4 100644
--- a/frontend/src/views/settings/components/privacy/RulesTable.vue
+++ b/frontend/src/views/settings/components/privacy/RulesTable.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { PrivacyRule } from '@/api/modules/settings/privacy'
-import { BaseIconButton, BaseMenuItem, BasePopover, BaseSwitch, BaseTable, defineTableColumns } from '@codex-proxy/ui'
+import { defineTableColumns, ZIconButton, ZMenuItem, ZPopover, ZSwitch, ZTable } from '@codex-proxy/ui'
 import { ArrowDown, ArrowUp, Copy, MoreHorizontal, Pencil, Trash2 } from '@lucide/vue'
 import { shallowRef } from 'vue'
 import { actions, scopes } from './presets'
@@ -24,10 +24,10 @@ const columns = defineTableColumns<PrivacyRule>([
 </script>
 
 <template>
-  <BaseTable :columns="columns" :rows="rules" density="compact" empty-text="暂无规则，添加一条或从预设开始">
+  <ZTable :columns="columns" :data="rules" size="small" empty-text="暂无规则，添加一条或从预设开始">
     <template #enabled="{ row }">
       <div class="flex items-center justify-center">
-        <BaseSwitch :disabled="disabled" :model-value="row.enabled" :label="`启用规则：${row.name}`" @update:model-value="emit('toggle', row, $event)" />
+        <ZSwitch :disabled="disabled" :model-value="row.enabled" :aria-label="`启用规则：${row.name}`" @update:model-value="emit('toggle', row, $event)" />
       </div>
     </template>
     <template #name="{ row }">
@@ -44,39 +44,39 @@ const columns = defineTableColumns<PrivacyRule>([
     </template>
     <template #actions="{ row }">
       <div class="flex items-center justify-end gap-1">
-        <BaseIconButton size="sm" :disabled="disabled" variant="ghost" :label="`编辑${row.name}`" @click="emit('edit', row)">
+        <ZIconButton size="small" :disabled="disabled" :aria-label="`编辑${row.name}`" @click="emit('edit', row)">
           <Pencil class="size-3.5" />
-        </BaseIconButton>
-        <BasePopover :model-value="activeMenu === row.id" @update:model-value="activeMenu = $event ? row.id : ''">
-          <template #trigger>
-            <BaseIconButton size="sm" :disabled="disabled" :label="`${row.name}的更多操作`" variant="ghost">
+        </ZIconButton>
+        <ZPopover :model-value="activeMenu === row.id" @update:model-value="activeMenu = $event ? row.id : ''">
+          <template #reference>
+            <ZIconButton size="small" :disabled="disabled" :aria-label="`${row.name}的更多操作`">
               <MoreHorizontal class="size-3.5" />
-            </BaseIconButton>
+            </ZIconButton>
           </template>
           <div class="w-40 p-1.5">
-            <BaseMenuItem :disabled="rules[0]?.id === row.id" @click="emit('move', rules.indexOf(row), -1); activeMenu = ''">
+            <ZMenuItem :disabled="rules[0]?.id === row.id" @click="emit('move', rules.indexOf(row), -1); activeMenu = ''">
               <template #icon>
                 <ArrowUp class="size-3.5" />
               </template>上移
-            </BaseMenuItem>
-            <BaseMenuItem :disabled="rules.at(-1)?.id === row.id" @click="emit('move', rules.indexOf(row), 1); activeMenu = ''">
+            </ZMenuItem>
+            <ZMenuItem :disabled="rules.at(-1)?.id === row.id" @click="emit('move', rules.indexOf(row), 1); activeMenu = ''">
               <template #icon>
                 <ArrowDown class="size-3.5" />
               </template>下移
-            </BaseMenuItem>
-            <BaseMenuItem @click="emit('duplicate', row); activeMenu = ''">
+            </ZMenuItem>
+            <ZMenuItem @click="emit('duplicate', row); activeMenu = ''">
               <template #icon>
                 <Copy class="size-3.5" />
               </template>复制
-            </BaseMenuItem>
-            <BaseMenuItem tone="destructive" @click="emit('remove', row); activeMenu = ''">
+            </ZMenuItem>
+            <ZMenuItem type="danger" @click="emit('remove', row); activeMenu = ''">
               <template #icon>
                 <Trash2 class="size-3.5" />
               </template>删除规则
-            </BaseMenuItem>
+            </ZMenuItem>
           </div>
-        </BasePopover>
+        </ZPopover>
       </div>
     </template>
-  </BaseTable>
+  </ZTable>
 </template>
diff --git a/frontend/src/views/settings/composables/useAdminApiKey.ts b/frontend/src/views/settings/composables/useAdminApiKey.ts
index 8a120967f..2b0a8bdbe 100644
--- a/frontend/src/views/settings/composables/useAdminApiKey.ts
+++ b/frontend/src/views/settings/composables/useAdminApiKey.ts
@@ -1,4 +1,4 @@
-import { toast } from '@codex-proxy/ui'
+import { ZNotification } from '@codex-proxy/ui'
 
 import { reactive, shallowRef } from 'vue'
 import {
@@ -40,7 +40,7 @@ export function useAdminApiKey() {
         const wasEnabled = status.exists
         generatedKey.value = (await regenerateAdminApiKey()).key
         status.exists = true
-        toast.success(wasEnabled ? '管理员 API Key 已更新' : '管理员 API Key 已生成')
+        ZNotification.success({ message: wasEnabled ? '管理员 API Key 已更新' : '管理员 API Key 已生成' })
       },
     )
   }
@@ -55,7 +55,7 @@ export function useAdminApiKey() {
         status.exists = false
         generatedKey.value = ''
         showDeleteModal.value = false
-        toast.success('管理员 API Key 已删除')
+        ZNotification.success({ message: '管理员 API Key 已删除' })
       },
     )
   }
diff --git a/frontend/src/views/settings/composables/useBackupRecords.ts b/frontend/src/views/settings/composables/useBackupRecords.ts
index b54096b98..b3e5ee1d7 100644
--- a/frontend/src/views/settings/composables/useBackupRecords.ts
+++ b/frontend/src/views/settings/composables/useBackupRecords.ts
@@ -1,6 +1,6 @@
 import type { BackupRecord, BackupStatus } from '@/api'
 
-import { toast } from '@codex-proxy/ui'
+import { ZNotification } from '@codex-proxy/ui'
 import { computed, onScopeDispose, shallowRef } from 'vue'
 import {
   createBackup,
@@ -117,7 +117,7 @@ export function useBackupRecords() {
     creating.value = true
     try {
       await createBackup()
-      toast.success('备份任务已创建')
+      ZNotification.success({ message: '备份任务已创建' })
       await paged.execute({ silent: true })
     }
     catch {}
@@ -142,7 +142,7 @@ export function useBackupRecords() {
     }
     catch (cause) {
       if (!(cause instanceof ApiError))
-        toast.error(errorMessage(cause, '下载备份失败'))
+        ZNotification.error({ message: errorMessage(cause, '下载备份失败') })
     }
     finally {
       downloadStates.value = { ...downloadStates.value, [record.id]: false }
@@ -161,7 +161,7 @@ export function useBackupRecords() {
     deleting.value = true
     try {
       await deleteBackup({ backupId: target.id })
-      toast.success('已请求删除备份')
+      ZNotification.success({ message: '已请求删除备份' })
       await paged.execute({ silent: true })
     }
     catch {}
diff --git a/frontend/src/views/settings/composables/useBackupSettings.ts b/frontend/src/views/settings/composables/useBackupSettings.ts
index 3dfd226b5..7cd6b7b0f 100644
--- a/frontend/src/views/settings/composables/useBackupSettings.ts
+++ b/frontend/src/views/settings/composables/useBackupSettings.ts
@@ -1,6 +1,6 @@
 import type { BackupSettingsView, UpdateBackupStoragePayload } from '@/api'
 
-import { toast } from '@codex-proxy/ui'
+import { ZNotification } from '@codex-proxy/ui'
 import { computed, ref, shallowRef } from 'vue'
 import {
   getBackupSettings,
@@ -102,7 +102,7 @@ export function useBackupSettings() {
       // 仅存储版本变化时同步服务端暂停状态，普通保存不覆盖计划草稿。
       if (storageChanged)
         schedule.value.scheduleEnabled = data.scheduleEnabled
-      toast.success(schedulePaused ? '存储配置已保存，定时备份已暂停，请测试连接后重新启用' : '存储配置已保存')
+      ZNotification.success({ message: schedulePaused ? '存储配置已保存，定时备份已暂停，请测试连接后重新启用' : '存储配置已保存' })
       return true
     }
     catch {
@@ -121,11 +121,11 @@ export function useBackupSettings() {
       const result = await testBackupStorage()
       if (result.ok) {
         verified.value = true
-        toast.success('连接测试通过')
+        ZNotification.success({ message: '连接测试通过' })
       }
       else {
         verified.value = false
-        toast.error(`${result.stage}: ${result.message}`)
+        ZNotification.error({ message: `${result.stage}: ${result.message}` })
       }
     }
     catch {
@@ -148,7 +148,7 @@ export function useBackupSettings() {
         retentionCount: Number(schedule.value.retentionCount) || 0,
       })
       applySchedule(data)
-      toast.success('备份计划已保存')
+      ZNotification.success({ message: '备份计划已保存' })
       return true
     }
     catch {
diff --git a/frontend/src/views/settings/composables/useSettingsForm.ts b/frontend/src/views/settings/composables/useSettingsForm.ts
index e9453643c..22b705cda 100644
--- a/frontend/src/views/settings/composables/useSettingsForm.ts
+++ b/frontend/src/views/settings/composables/useSettingsForm.ts
@@ -1,7 +1,7 @@
 import type { rotationOptions } from '../constants'
 import type { AccountAffinity, CodexPrivacyPolicy, SmartSchedulingConfig } from '@/api'
 import type { ProviderRequestProfiles, ProviderRequestProfileUpdates } from '@/api/modules/settings/profiles'
-import { toast } from '@codex-proxy/ui'
+import { ZNotification } from '@codex-proxy/ui'
 import { cloneDeep, isEqual } from 'es-toolkit'
 
 import { computed, reactive, ref, shallowRef } from 'vue'
@@ -213,37 +213,37 @@ export function useSettingsForm() {
       return
     const { refreshMarginSeconds, refreshConcurrency, maxConcurrentPerAccount, openaiGuardianReservedConcurrency, openaiAccountAffinity, maxAccountRotations, openaiSessionAffinityTtlHours, requestIntervalMs, rotationStrategy, maxWaitingPerKey, maxWaitingPerAccount, concurrencyWaitTimeoutSeconds, responsesMaxDecompressedBodyMiB, accountAutoFreezeThreshold, accountAutoFreezeWindowSeconds, accountAutoFreezeDurationSeconds } = form
     if (!openaiAccountAffinity || maxAccountRotations === null || openaiSessionAffinityTtlHours === null || refreshMarginSeconds === null || refreshConcurrency === null || maxConcurrentPerAccount === null || openaiGuardianReservedConcurrency === null || requestIntervalMs === null || !rotationStrategy || maxWaitingPerKey === null || maxWaitingPerAccount === null || concurrencyWaitTimeoutSeconds === null) {
-      toast.warning('请完整填写并发、队列、凭据刷新参数和调度策略')
+      ZNotification.warning({ message: '请完整填写并发、队列、凭据刷新参数和调度策略' })
       return
     }
     if (!Number.isInteger(openaiSessionAffinityTtlHours) || openaiSessionAffinityTtlHours < 1 || openaiSessionAffinityTtlHours > 720) {
-      toast.warning('亲和时长应为 1～720 小时的整数')
+      ZNotification.warning({ message: '亲和时长应为 1～720 小时的整数' })
       return
     }
     if (!Number.isInteger(maxAccountRotations) || maxAccountRotations < 0 || maxAccountRotations > 31) {
-      toast.warning('最大换号次数应为 0～31 的整数，0 表示不换号')
+      ZNotification.warning({ message: '最大换号次数应为 0～31 的整数，0 表示不换号' })
       return
     }
     if (!Number.isInteger(maxConcurrentPerAccount) || maxConcurrentPerAccount < 0 || maxConcurrentPerAccount > 4294967295) {
-      toast.warning('默认账号并发上限应为 0～4294967295 的整数，0 表示不限制')
+      ZNotification.warning({ message: '默认账号并发上限应为 0～4294967295 的整数，0 表示不限制' })
       return
     }
     if (!Number.isInteger(openaiGuardianReservedConcurrency) || openaiGuardianReservedConcurrency < 0 || openaiGuardianReservedConcurrency > 4294967295) {
-      toast.warning('自动审批独立并发应为 0～4294967295 的整数，0 表示共用普通并发')
+      ZNotification.warning({ message: '自动审批独立并发应为 0～4294967295 的整数，0 表示共用普通并发' })
       return
     }
     if (responsesMaxDecompressedBodyMiB === null || !Number.isInteger(responsesMaxDecompressedBodyMiB) || responsesMaxDecompressedBodyMiB < 1
       || !Number.isSafeInteger(responsesMaxDecompressedBodyMiB * MIB)) {
-      toast.warning('Responses 解压上限应为有效的正整数（MiB）')
+      ZNotification.warning({ message: 'Responses 解压上限应为有效的正整数（MiB）' })
       return
     }
     if (![maxWaitingPerKey, maxWaitingPerAccount].every(value => Number.isInteger(value) && value >= 0 && value <= 1000)
       || !Number.isInteger(concurrencyWaitTimeoutSeconds) || concurrencyWaitTimeoutSeconds < 1 || concurrencyWaitTimeoutSeconds > 120) {
-      toast.warning('队列容量应为 0～1000 的整数，排队超时应为 1～120 秒的整数')
+      ZNotification.warning({ message: '队列容量应为 0～1000 的整数，排队超时应为 1～120 秒的整数' })
       return
     }
     if (minCodexDesktopVersionError.value || minCodexCliVersionError.value) {
-      toast.warning('请修正客户端最低版本格式')
+      ZNotification.warning({ message: '请修正客户端最低版本格式' })
       return
     }
     // 关闭时保留已保存的自定义值，未完成的草稿不阻止停止覆盖。
@@ -252,37 +252,37 @@ export function useSettingsForm() {
       : savedSettings.form.requestLocation
     const locationError = requestLocationError(requestLocation)
     if (locationError) {
-      toast.warning(locationError)
+      ZNotification.warning({ message: locationError })
       return
     }
     if (accountAutoFreezeThreshold === null || accountAutoFreezeWindowSeconds === null || accountAutoFreezeDurationSeconds === null) {
-      toast.warning('请完整填写过载保护参数')
+      ZNotification.warning({ message: '请完整填写过载保护参数' })
       return
     }
     if (!Number.isInteger(accountAutoFreezeThreshold) || accountAutoFreezeThreshold < 2 || accountAutoFreezeThreshold > 1000
       || !Number.isInteger(accountAutoFreezeWindowSeconds) || accountAutoFreezeWindowSeconds < 60 || accountAutoFreezeWindowSeconds > 3600
       || !Number.isInteger(accountAutoFreezeDurationSeconds) || accountAutoFreezeDurationSeconds < 300 || accountAutoFreezeDurationSeconds > 604800) {
-      toast.warning('失败次数阈值应为 2～1000，统计窗口为 60～3600 秒，冷却时长为 300～604800 秒')
+      ZNotification.warning({ message: '失败次数阈值应为 2～1000，统计窗口为 60～3600 秒，冷却时长为 300～604800 秒' })
       return
     }
     const probeModel = form.accountAutoFreezeProbeModel.trim()
     if (probeModel.length > 128) {
-      toast.warning('探测模型名称不能超过 128 个字符')
+      ZNotification.warning({ message: '探测模型名称不能超过 128 个字符' })
       return
     }
     const scheduleTime = form.accountWarmupScheduleTime.trim()
     const timeRegex = /^(?:[01]\d|2[0-3]):[0-5]\d(?:,(?:[01]\d|2[0-3]):[0-5]\d)*$/
     if (!scheduleTime || !timeRegex.test(scheduleTime)) {
-      toast.warning('预激活时间格式无效，请输入 HH:MM 格式（如 08:00 或 08:00,13:00）')
+      ZNotification.warning({ message: '预激活时间格式无效，请输入 HH:MM 格式（如 08:00 或 08:00,13:00）' })
       return
     }
     const warmupModel = form.accountWarmupModel.trim()
     if (form.accountWarmupEnabled && !warmupModel) {
-      toast.warning('启用预激活时请选择模型')
+      ZNotification.warning({ message: '启用预激活时请选择模型' })
       return
     }
     if (warmupModel.length > 128) {
-      toast.warning('预激活模型名称不能超过 128 个字符')
+      ZNotification.warning({ message: '预激活模型名称不能超过 128 个字符' })
       return
     }
     await saveAction.run(async () => {
@@ -327,7 +327,7 @@ export function useSettingsForm() {
         accountWarmupModel: warmupModel || null,
       })
       applySettings(result)
-      toast.success('设置已保存')
+      ZNotification.success({ message: '设置已保存' })
     }, {
       onError: (cause) => {
         if (cause instanceof ApiError && cause.status !== 409)
diff --git a/frontend/src/views/settings/index.vue b/frontend/src/views/settings/index.vue
index 62b8ce3fd..31c142a69 100644
--- a/frontend/src/views/settings/index.vue
+++ b/frontend/src/views/settings/index.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { BaseButton, BaseIconButton, BasePageHeader, BaseSegmented, BaseSelect } from '@codex-proxy/ui'
+import { ZButton, ZIconButton, ZPageHeader, ZSegmented, ZSelect } from '@codex-proxy/ui'
 
 import { Save, Undo2 } from '@lucide/vue'
 import { computed, reactive, shallowRef, watch } from 'vue'
@@ -43,7 +43,7 @@ const isBasicSection = computed(() => section.value !== 'pricing' && section.val
 const visited = reactive(new Set<string>())
 const settingsVisited = shallowRef(false)
 
-function switchSection(value: string): void {
+function switchSection(value = 'runtime'): void {
   void router.push(value === 'runtime' ? '/settings' : `/settings/${value}`)
 }
 
@@ -93,17 +93,17 @@ watch(section, (value) => {
 
 <template>
   <div class="w-full" :class="section === 'pricing' ? 'flex h-[calc(100dvh-2rem)] flex-none! flex-col min-[961px]:h-[calc(100dvh-3rem)]' : undefined">
-    <BasePageHeader title="系统设置" description="管理网关调度、上游配置、模型定价、安全访问与数据备份" />
+    <ZPageHeader title="系统设置" description="管理网关调度、上游配置、模型定价、安全访问与数据备份" />
 
     <div class="mt-4 flex min-h-cp-control shrink-0 flex-wrap items-center justify-between gap-3">
-      <BaseSegmented
+      <ZSegmented
         :model-value="section"
-        label="设置分区"
+        aria-label="设置分区"
         class="hidden! bg-(--cp-input-bg)! sm:inline-grid!"
         :options="sectionOptions"
         @update:model-value="switchSection"
       />
-      <BaseSelect
+      <ZSelect
         :model-value="section"
         aria-label="设置分区"
         class="w-full sm:hidden"
@@ -112,15 +112,15 @@ watch(section, (value) => {
       />
       <div v-if="isBasicSection || hasChanges" class="ml-auto flex items-center justify-end gap-2">
         <span v-if="hasChanges" class="mr-1 size-1.5 shrink-0 rounded-full bg-cp-warning" aria-hidden="true" />
-        <BaseIconButton v-if="hasChanges" label="撤销全部基础设置更改" variant="secondary" :disabled="saving || loading" @click="resetSettings">
+        <ZIconButton v-if="hasChanges" aria-label="撤销全部基础设置更改" variant="solid" :disabled="saving || loading" @click="resetSettings">
           <Undo2 class="size-4" />
-        </BaseIconButton>
-        <BaseButton variant="primary" :loading="saving" :disabled="loading || !hasChanges || !!error" @click="saveSettings">
+        </ZIconButton>
+        <ZButton type="primary" :loading="saving" :disabled="loading || !hasChanges || !!error" @click="saveSettings">
           <template #icon>
             <Save class="size-4" />
           </template>
           {{ saving ? '保存中...' : '保存基础设置' }}
-        </BaseButton>
+        </ZButton>
       </div>
     </div>
 
@@ -129,9 +129,9 @@ watch(section, (value) => {
         <p class="m-0 text-cp">
           设置加载失败：{{ error }}
         </p>
-        <BaseButton :loading="loading" @click="loadSettings()">
+        <ZButton :loading="loading" @click="loadSettings()">
           重新加载
-        </BaseButton>
+        </ZButton>
       </div>
 
       <SettingsAccessSection
diff --git a/frontend/src/views/settings/pricing/PricingBatchModal.vue b/frontend/src/views/settings/pricing/PricingBatchModal.vue
index 3f6ddb9f3..a920d1cbb 100644
--- a/frontend/src/views/settings/pricing/PricingBatchModal.vue
+++ b/frontend/src/views/settings/pricing/PricingBatchModal.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { PricingRow } from './model'
 import type { PricingChange } from '@/api'
-import { BaseButton, BaseFormItem, BaseInput, BaseModal, BaseScrollbar } from '@codex-proxy/ui'
+import { ZButton, ZDialog, ZFormItem, ZInput, ZScrollbar } from '@codex-proxy/ui'
 import { computed, ref, watch } from 'vue'
 import { multiplierText, parseMultiplier } from './model'
 
@@ -17,37 +17,37 @@ watch(open, (value) => {
 </script>
 
 <template>
-  <BaseModal v-model="open" :title="reset ? '清除人工覆盖' : '批量设置倍率'" :description="`仅修改下列 ${rows.length} 个模型，不重算历史账单`" :dismissible="!saving" tone="warning">
+  <ZDialog v-model="open" :title="reset ? '清除人工覆盖' : '批量设置倍率'" :description="`仅修改下列 ${rows.length} 个模型，不重算历史账单`" :show-close="!saving" :close-on-click-modal="!saving" :close-on-press-escape="!saving" type="warning">
     <div class="grid gap-4">
       <p v-if="reset" class="m-0 text-cp leading-relaxed text-cp-text-secondary">
         恢复来源或内置价格，无可用价格时设为未配置
       </p>
-      <BaseFormItem v-else label="目标倍率" description="设置为此倍率，不与已有倍率相乘，0～100，最多四位小数">
-        <BaseInput v-model="multiplier" aria-label="目标倍率" inputmode="decimal" :disabled="saving">
+      <ZFormItem v-else label="目标倍率" description="设置为此倍率，不与已有倍率相乘，0～100，最多四位小数">
+        <ZInput v-model="multiplier" aria-label="目标倍率" inputmode="decimal" :disabled="saving">
           <template #suffix>
             ×
           </template>
-        </BaseInput>
-      </BaseFormItem>
-      <BaseScrollbar max-height="16rem" class="rounded-cp bg-cp-fill-quaternary">
+        </ZInput>
+      </ZFormItem>
+      <ZScrollbar max-height="16rem" class="rounded-cp bg-cp-fill-quaternary">
         <ul class="m-0 list-none p-3 text-cp-sm">
           <li v-for="row in rows" :key="row.model" class="flex items-start justify-between gap-3 py-2">
             <span class="min-w-0 break-all font-mono">{{ row.model }}</span>
             <span class="shrink-0 font-mono text-cp-text-secondary">{{ multiplierText(row.effective.multiplierBps) }} → {{ reset ? '1×' : bps === undefined ? '—' : multiplierText(bps) }}</span>
           </li>
         </ul>
-      </BaseScrollbar>
+      </ZScrollbar>
       <p v-if="!reset && bps === undefined" role="alert" class="m-0 text-cp-sm text-cp-error">
         请输入合法倍率
       </p>
     </div>
     <template #footer>
-      <BaseButton :disabled="saving" @click="open = false">
+      <ZButton :disabled="saving" @click="open = false">
         取消
-      </BaseButton>
-      <BaseButton variant="primary" :loading="saving" :disabled="!rows.length || (!reset && bps === undefined)" @click="$emit('confirm', reset ? { action: 'reset' } : { action: 'multiplier', multiplierBps: bps! })">
+      </ZButton>
+      <ZButton type="primary" :loading="saving" :disabled="!rows.length || (!reset && bps === undefined)" @click="$emit('confirm', reset ? { action: 'reset' } : { action: 'multiplier', multiplierBps: bps! })">
         {{ reset ? '确认清除覆盖' : '确认设置倍率' }}
-      </BaseButton>
+      </ZButton>
     </template>
-  </BaseModal>
+  </ZDialog>
 </template>
diff --git a/frontend/src/views/settings/pricing/PricingEditor.vue b/frontend/src/views/settings/pricing/PricingEditor.vue
index 1ab4a47c9..8058d5e63 100644
--- a/frontend/src/views/settings/pricing/PricingEditor.vue
+++ b/frontend/src/views/settings/pricing/PricingEditor.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { PricingRow } from './model'
 import type { ModelPricing, PriceBand, TokenPrices } from '@/api'
-import { BaseButton, BaseFormItem, BaseInput, BaseModal, BasePopover, BaseSegmented, BaseSelect } from '@codex-proxy/ui'
+import { ZButton, ZDialog, ZFormItem, ZInput, ZPopover, ZSegmented, ZSelect } from '@codex-proxy/ui'
 import { Info } from '@lucide/vue'
 import { computed, ref, shallowRef, useId, watch } from 'vue'
 import ProviderIconGroup from '@/components/ProviderIconGroup.vue'
@@ -86,7 +86,7 @@ function submit() {
 </script>
 
 <template>
-  <BaseModal v-model="open" :title="row ? '编辑模型价格' : '添加模型价格'" size="md-wide" :dismissible="!saving">
+  <ZDialog v-model="open" :title="row ? '编辑模型价格' : '添加模型价格'" width="42rem" :show-close="!saving" :close-on-click-modal="!saving" :close-on-press-escape="!saving">
     <template #description>
       <span class="inline-flex items-center gap-2 align-middle text-cp-sm font-normal">
         <ProviderIconGroup :provider="provider" size="sm" />
@@ -95,30 +95,30 @@ function submit() {
     </template>
     <div class="grid gap-5">
       <div class="grid grid-cols-[minmax(0,1fr)_6.5rem] gap-3 sm:grid-cols-[minmax(0,1fr)_8rem] sm:gap-4">
-        <BaseFormItem label="上游模型 ID">
-          <BaseInput v-model="model" :disabled="saving || !!row" aria-label="上游模型 ID" placeholder="例如 gpt-5.4" class="font-mono" />
-        </BaseFormItem>
-        <BaseFormItem label="倍率">
-          <BaseInput v-model="multiplier" aria-label="自定义倍率" class="font-mono" inputmode="decimal" :disabled="saving">
+        <ZFormItem label="上游模型 ID">
+          <ZInput v-model="model" :disabled="saving || !!row" aria-label="上游模型 ID" placeholder="例如 gpt-5.4" class="font-mono" />
+        </ZFormItem>
+        <ZFormItem label="倍率">
+          <ZInput v-model="multiplier" aria-label="自定义倍率" class="font-mono" inputmode="decimal" :disabled="saving">
             <template #suffix>
               ×
             </template>
-          </BaseInput>
-        </BaseFormItem>
+          </ZInput>
+        </ZFormItem>
       </div>
       <section aria-label="档位价格">
         <div class="mb-5 flex flex-wrap items-center justify-between gap-3">
-          <BaseSelect :model-value="selectedBand" :options="bandOptions" aria-label="价格档位" class="min-w-0 flex-1 sm:max-w-56" :disabled="saving" @update:model-value="selectedBand = $event as PriceBand" />
-          <BaseSegmented v-model="priceMode" label="单价来源" :options="sourceOptions" :disabled="saving" />
+          <ZSelect :model-value="selectedBand" :options="bandOptions" aria-label="价格档位" class="min-w-0 flex-1 sm:max-w-56" :disabled="saving" @update:model-value="selectedBand = $event as PriceBand" />
+          <ZSegmented v-model="priceMode" aria-label="单价来源" :options="sourceOptions" :disabled="saving" />
         </div>
         <PricingRateFields v-if="current || base" class="rounded-cp-lg bg-cp-fill-quaternary p-4" :base="base" :custom="current" :multiplier-bps="bps" :disabled="saving" @change="updatePrice" />
         <div v-else class="grid justify-items-center gap-3 py-6 text-cp-sm text-cp-text-tertiary">
           <p class="m-0">
             此档位暂无来源价格
           </p>
-          <BaseButton size="sm" :disabled="saving" @click="toggleBand(true)">
+          <ZButton size="small" :disabled="saving" @click="toggleBand(true)">
             填写单价
-          </BaseButton>
+          </ZButton>
         </div>
       </section>
       <p v-if="validation" role="alert" class="m-0 rounded-cp bg-cp-error-container p-3 text-cp-sm text-cp-error-on-container">
@@ -126,14 +126,14 @@ function submit() {
       </p>
     </div>
     <template #footer>
-      <BasePopover v-model="helpOpen" class="mr-auto self-center" placement="top-start" trigger="hover-click">
-        <template #trigger>
-          <BaseButton variant="ghost" :aria-expanded="helpOpen" :aria-controls="helpOpen ? helpId : undefined">
+      <ZPopover v-model="helpOpen" class="mr-auto self-center" placement="top-start" trigger="hover-click">
+        <template #reference>
+          <ZButton variant="text" :aria-expanded="helpOpen" :aria-controls="helpOpen ? helpId : undefined">
             <template #icon>
               <Info class="size-3.5" aria-hidden="true" />
             </template>
             计价说明
-          </BaseButton>
+          </ZButton>
         </template>
         <div :id="helpId" class="grid w-72 gap-2 p-3 text-cp-xs leading-relaxed text-cp-text-secondary">
           <p class="m-0">
@@ -146,12 +146,12 @@ function submit() {
             仅调整本地估算与金额限额，不代表订阅实际扣费，保存后仅新请求生效，历史账单不变
           </p>
         </div>
-      </BasePopover>
-      <BaseButton :disabled="saving" @click="open = false">
+      </ZPopover>
+      <ZButton :disabled="saving" @click="open = false">
         取消
-      </BaseButton><BaseButton variant="primary" :loading="saving" @click="submit">
+      </ZButton><ZButton type="primary" :loading="saving" @click="submit">
         保存
-      </BaseButton>
+      </ZButton>
     </template>
-  </BaseModal>
+  </ZDialog>
 </template>
diff --git a/frontend/src/views/settings/pricing/PricingRateFields.vue b/frontend/src/views/settings/pricing/PricingRateFields.vue
index 9421e9ea3..70c771cff 100644
--- a/frontend/src/views/settings/pricing/PricingRateFields.vue
+++ b/frontend/src/views/settings/pricing/PricingRateFields.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { TokenPrices } from '@/api'
-import { BaseFormItem, BaseInput } from '@codex-proxy/ui'
+import { ZFormItem, ZInput } from '@codex-proxy/ui'
 import { effectivePrice, priceFields, validPrice } from './model'
 
 const props = defineProps<{
@@ -22,8 +22,8 @@ function preview(field: keyof TokenPrices) {
 <template>
   <div class="grid grid-cols-2 gap-x-4 gap-y-5 sm:gap-x-6">
     <div v-for="field in priceFields" :key="field.key" class="min-w-0">
-      <BaseFormItem v-if="custom" :label="field.label">
-        <BaseInput
+      <ZFormItem v-if="custom" :label="field.label">
+        <ZInput
           :model-value="custom[field.key]"
           :aria-label="`${field.label}单价`"
           class="font-mono"
@@ -32,7 +32,7 @@ function preview(field: keyof TokenPrices) {
           :disabled="disabled"
           @update:model-value="$emit('change', field.key, $event)"
         />
-      </BaseFormItem>
+      </ZFormItem>
       <div v-else>
         <div class="mb-2 text-cp leading-none font-medium text-cp-text-secondary">
           {{ field.label }}
diff --git a/frontend/src/views/settings/pricing/PricingSyncModal.vue b/frontend/src/views/settings/pricing/PricingSyncModal.vue
index 7943b9deb..8fa6d4b4e 100644
--- a/frontend/src/views/settings/pricing/PricingSyncModal.vue
+++ b/frontend/src/views/settings/pricing/PricingSyncModal.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { PricingCatalog, PricingSyncPreview } from '@/api'
-import { BaseButton, BaseCheckbox, BaseModal, BaseScrollbar, BaseTag } from '@codex-proxy/ui'
+import { ZButton, ZCheckbox, ZDialog, ZScrollbar, ZTag } from '@codex-proxy/ui'
 import { computed, shallowRef, watch } from 'vue'
 import { bands, effectivePrice, priceFields } from './model'
 
@@ -64,36 +64,34 @@ function confirm() {
 </script>
 
 <template>
-  <BaseModal v-model="open" title="确认同步来源价目" description="USD / 1M Tokens" size="lg" :dismissible="!saving">
+  <ZDialog v-model="open" title="确认同步来源价目" description="USD / 1M Tokens" width="48rem" :show-close="!saving" :close-on-click-modal="!saving" :close-on-press-escape="!saving">
     <div class="grid gap-4">
       <p class="m-0 text-cp text-cp-text-secondary">
         仅同步所选模型的来源价格，保留自定义单价和倍率
       </p>
       <div v-if="changes.length" class="flex items-center justify-between gap-3">
-        <BaseCheckbox
+        <ZCheckbox
           :model-value="allSelected"
           :indeterminate="partiallySelected"
           label="全选"
-          show-label
           :disabled="saving"
           @update:model-value="selected = new Set($event ? changes.map(item => item.id) : [])"
         />
         <span class="text-cp-sm text-cp-text-tertiary" aria-live="polite">已选 {{ selectedChanges.length }} / {{ changes.length }}</span>
       </div>
-      <BaseScrollbar max-height="20rem" class="rounded-cp bg-cp-fill-quaternary">
+      <ZScrollbar max-height="20rem" class="rounded-cp bg-cp-fill-quaternary">
         <div class="p-4">
           <div v-for="item in changes" :key="item.id" class="grid gap-2 py-3 text-cp-sm">
-            <BaseCheckbox
+            <ZCheckbox
               :model-value="selected.has(item.id)"
               :label="item.id"
-              show-label
               :disabled="saving"
               @update:model-value="toggle(item.id, $event)"
             >
               <template #label>
                 <span class="break-all font-mono text-cp-sm font-normal">{{ item.id }}</span>
               </template>
-            </BaseCheckbox>
+            </ZCheckbox>
             <span v-if="item.custom" class="pl-6.5 text-cp-xs text-cp-primary-text">保留人工覆盖</span>
             <div v-if="item.details.length" class="ml-6.5 grid gap-1">
               <div v-for="detail in item.details" :key="detail.label" class="grid grid-cols-2 items-center gap-x-4 rounded-cp-sm bg-cp-bg-container px-2 py-1.5 text-cp-xs">
@@ -108,28 +106,28 @@ function confirm() {
             来源价格没有变化
           </p>
         </div>
-      </BaseScrollbar>
+      </ZScrollbar>
       <details v-if="preview?.skipped.length" class="text-cp-sm text-cp-text-secondary">
         <summary class="cursor-pointer">
           跳过 {{ preview.skipped.length }} 个缺少完整价格或计价方式不匹配的模型
         </summary>
-        <BaseScrollbar max-height="10rem" class="mt-3">
+        <ZScrollbar max-height="10rem" class="mt-3">
           <ul class="m-0 flex list-none flex-wrap gap-2 p-0 pr-2" aria-label="跳过同步的模型">
             <li v-for="model in preview.skipped" :key="model" class="flex max-w-full min-w-0">
-              <BaseTag class="font-mono">
+              <ZTag class="font-mono">
                 {{ model }}
-              </BaseTag>
+              </ZTag>
             </li>
           </ul>
-        </BaseScrollbar>
+        </ZScrollbar>
       </details>
     </div>
     <template #footer>
-      <BaseButton :disabled="saving" @click="open = false">
+      <ZButton :disabled="saving" @click="open = false">
         取消
-      </BaseButton><BaseButton variant="primary" :loading="saving" :disabled="!selectedChanges.length" @click="confirm">
+      </ZButton><ZButton type="primary" :loading="saving" :disabled="!selectedChanges.length" @click="confirm">
         确认同步
-      </BaseButton>
+      </ZButton>
     </template>
-  </BaseModal>
+  </ZDialog>
 </template>
diff --git a/frontend/src/views/settings/pricing/PricingTable.vue b/frontend/src/views/settings/pricing/PricingTable.vue
index 9bbc748d8..0cea18000 100644
--- a/frontend/src/views/settings/pricing/PricingTable.vue
+++ b/frontend/src/views/settings/pricing/PricingTable.vue
@@ -1,14 +1,14 @@
 <script setup lang="ts">
-import type { BaseTableColumn } from '@codex-proxy/ui'
+import type { TableColumn } from '@codex-proxy/ui'
 import type { PricingRow } from './model'
-import { BaseCheckbox, BaseIconButton, BaseTable } from '@codex-proxy/ui'
+import { ZCheckbox, ZIconButton, ZTable } from '@codex-proxy/ui'
 import { Pencil, Trash2 } from '@lucide/vue'
 import { effectivePrice, multiplierText, sourceLabels } from './model'
 import PricingUnit from './PricingUnit.vue'
 
 defineProps<{ rows: PricingRow[], selected: string[], loading: boolean, disabled: boolean }>()
 defineEmits<{ toggle: [model: string, checked: boolean], togglePage: [checked: boolean], edit: [row: PricingRow], delete: [row: PricingRow] }>()
-const columns: BaseTableColumn<PricingRow>[] = [
+const columns: TableColumn<PricingRow>[] = [
   { key: 'select', kind: 'selection' },
   { key: 'model', label: '模型', kind: 'identity' },
   { key: 'input', label: '输入', kind: 'numeric' },
@@ -24,12 +24,12 @@ function summaryBand(row: PricingRow) {
 </script>
 
 <template>
-  <BaseTable :columns="columns" :rows="rows" row-key="model" :loading="loading" :selected-row-keys="selected" empty-text="没有匹配的模型" show-header-when-empty>
+  <ZTable :columns="columns" :data="rows" row-key="model" :loading="loading" :selected-row-keys="selected" empty-text="没有匹配的模型" show-header-when-empty>
     <template v-if="$slots.empty" #empty>
       <slot name="empty" />
     </template>
     <template #header-select>
-      <BaseCheckbox label="选择本页模型" :disabled="disabled || !rows.length" :model-value="!!rows.length && rows.every(row => selected.includes(row.model))" :indeterminate="rows.some(row => selected.includes(row.model)) && !rows.every(row => selected.includes(row.model))" @update:model-value="$emit('togglePage', $event)" />
+      <ZCheckbox aria-label="选择本页模型" :disabled="disabled || !rows.length" :model-value="!!rows.length && rows.every(row => selected.includes(row.model))" :indeterminate="rows.some(row => selected.includes(row.model)) && !rows.every(row => selected.includes(row.model))" @update:model-value="$emit('togglePage', $event)" />
     </template>
     <template #header-model>
       <div class="flex items-center gap-3">
@@ -38,7 +38,7 @@ function summaryBand(row: PricingRow) {
       </div>
     </template>
     <template #select="{ row }">
-      <BaseCheckbox :label="`选择 ${row.model}`" :disabled="disabled" :model-value="selected.includes(row.model)" @update:model-value="$emit('toggle', row.model, $event)" />
+      <ZCheckbox :aria-label="`选择 ${row.model}`" :disabled="disabled" :model-value="selected.includes(row.model)" @update:model-value="$emit('toggle', row.model, $event)" />
     </template>
     <template #model="{ row }">
       <div class="min-w-0 py-1.5">
@@ -69,13 +69,13 @@ function summaryBand(row: PricingRow) {
     </template>
     <template #actions="{ row }">
       <div class="flex items-center gap-1">
-        <BaseIconButton size="sm" label="编辑价格" :disabled="disabled" @click="$emit('edit', row)">
+        <ZIconButton size="small" aria-label="编辑价格" :disabled="disabled" @click="$emit('edit', row)">
           <Pencil class="size-3.5 text-cp-link" aria-hidden="true" />
-        </BaseIconButton>
-        <BaseIconButton v-if="row.canDelete" size="sm" label="删除价目" :disabled="disabled" @click="$emit('delete', row)">
+        </ZIconButton>
+        <ZIconButton v-if="row.canDelete" size="small" aria-label="删除价目" :disabled="disabled" @click="$emit('delete', row)">
           <Trash2 class="size-3.5 text-cp-error" aria-hidden="true" />
-        </BaseIconButton>
+        </ZIconButton>
       </div>
     </template>
-  </BaseTable>
+  </ZTable>
 </template>
diff --git a/frontend/src/views/settings/pricing/PricingToolbar.vue b/frontend/src/views/settings/pricing/PricingToolbar.vue
index 96d9b8e61..165ddf0c1 100644
--- a/frontend/src/views/settings/pricing/PricingToolbar.vue
+++ b/frontend/src/views/settings/pricing/PricingToolbar.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { BaseButton, BaseIconButton, BaseInput, BasePopover, BaseSegmented, BaseSelect } from '@codex-proxy/ui'
+import { ZButton, ZIconButton, ZInput, ZPopover, ZSegmented, ZSelect } from '@codex-proxy/ui'
 import { CircleAlert, Download, Percent, Plus, RotateCcw, Search, X } from '@lucide/vue'
 import { computed, shallowRef, useId } from 'vue'
 import { formatProviderLabel, providerIcon } from '@/utils/providers'
@@ -30,49 +30,49 @@ const providerOptions = computed(() => props.providers.map(value => ({
 <template>
   <div class="mb-3 shrink-0">
     <div class="flex flex-wrap items-center gap-2">
-      <BaseInput v-model="search" class="w-full sm:w-72" placeholder="搜索模型…" aria-label="搜索模型 ID">
+      <ZInput v-model="search" class="w-full sm:w-72" placeholder="搜索模型…" aria-label="搜索模型 ID">
         <template #prefix>
           <Search class="size-4" />
         </template>
-      </BaseInput>
+      </ZInput>
       <div v-if="providerOptions.length" class="min-w-0 max-w-full overflow-x-auto">
-        <BaseSegmented
+        <ZSegmented
           v-model="provider"
-          label="模型提供商"
+          aria-label="模型提供商"
           display="icon"
           :style="{ width: `${providerOptions.length * 40 + 4}px` }"
           :options="providerOptions"
           :disabled="saving"
         />
       </div>
-      <BaseSelect v-model="source" class="w-32" aria-label="价格来源" :options="[{ label: '全部来源', value: 'all' }, { label: sourceLabels.custom, value: 'custom' }, { label: sourceLabels.synced, value: 'synced' }, { label: sourceLabels.builtin, value: 'builtin' }]" />
+      <ZSelect v-model="source" class="w-32" aria-label="价格来源" :options="[{ label: '全部来源', value: 'all' }, { label: sourceLabels.custom, value: 'custom' }, { label: sourceLabels.synced, value: 'synced' }, { label: sourceLabels.builtin, value: 'builtin' }]" />
       <div v-if="selectedCount" class="ml-auto flex w-full flex-wrap items-center justify-end gap-2 sm:w-auto" role="group" aria-label="批量操作">
         <span class="inline-flex h-cp-control w-full items-center gap-1 whitespace-nowrap text-cp text-cp-text-secondary sm:mr-1 sm:w-auto" aria-live="polite">
           已选 <span class="font-mono tabular-nums">{{ selectedCount }}</span> 项
         </span>
-        <BaseButton :disabled="disabled || selectedCount > 500" @click="$emit('setMultiplier')">
+        <ZButton :disabled="disabled || selectedCount > 500" @click="$emit('setMultiplier')">
           <template #icon>
             <Percent class="size-4" />
           </template>
           设置倍率
-        </BaseButton>
-        <BaseButton :disabled="disabled || selectedCount > 500" @click="$emit('reset')">
+        </ZButton>
+        <ZButton :disabled="disabled || selectedCount > 500" @click="$emit('reset')">
           <template #icon>
             <RotateCcw class="size-4" />
           </template>
           清除覆盖
-        </BaseButton>
-        <BaseIconButton label="取消选择" variant="filled" :disabled="disabled" @click="$emit('clear')">
+        </ZButton>
+        <ZIconButton aria-label="取消选择" variant="plain" :disabled="disabled" @click="$emit('clear')">
           <X class="size-4" />
-        </BaseIconButton>
+        </ZIconButton>
       </div>
       <div v-else class="ml-auto flex items-center gap-2">
         <div class="flex items-center gap-1">
-          <BasePopover v-model="syncInfoOpen" placement="bottom-end" trigger="hover-click">
-            <template #trigger>
-              <BaseIconButton label="同步说明" size="sm" :aria-expanded="syncInfoOpen" :aria-controls="syncInfoOpen ? syncInfoId : undefined">
+          <ZPopover v-model="syncInfoOpen" placement="bottom-end" trigger="hover-click">
+            <template #reference>
+              <ZIconButton aria-label="同步说明" size="small" :aria-expanded="syncInfoOpen" :aria-controls="syncInfoOpen ? syncInfoId : undefined">
                 <CircleAlert class="size-3.5" />
-              </BaseIconButton>
+              </ZIconButton>
             </template>
             <div :id="syncInfoId" class="grid w-64 gap-2 p-3 text-cp-xs leading-relaxed text-cp-text-secondary">
               <p class="m-0">
@@ -82,20 +82,20 @@ const providerOptions = computed(() => props.providers.map(value => ({
                 最近同步：{{ syncTime }}
               </p>
             </div>
-          </BasePopover>
-          <BaseButton :loading="syncing" :disabled="disabled" aria-label="同步价目" @click="$emit('sync')">
+          </ZPopover>
+          <ZButton :loading="syncing" :disabled="disabled" aria-label="同步价目" @click="$emit('sync')">
             <template #icon>
               <Download class="size-4" />
             </template>
             同步
-          </BaseButton>
+          </ZButton>
         </div>
-        <BaseButton variant="primary" :disabled="disabled" @click="$emit('add')">
+        <ZButton type="primary" :disabled="disabled" @click="$emit('add')">
           <template #icon>
             <Plus class="size-4" />
           </template>
           添加模型
-        </BaseButton>
+        </ZButton>
       </div>
     </div>
   </div>
diff --git a/frontend/src/views/settings/pricing/PricingUnit.vue b/frontend/src/views/settings/pricing/PricingUnit.vue
index 25f93e0e1..b1a31d580 100644
--- a/frontend/src/views/settings/pricing/PricingUnit.vue
+++ b/frontend/src/views/settings/pricing/PricingUnit.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { BaseButton, BasePopover } from '@codex-proxy/ui'
+import { ZButton, ZPopover } from '@codex-proxy/ui'
 import { Info } from '@lucide/vue'
 import { shallowRef, useId } from 'vue'
 
@@ -8,18 +8,17 @@ const infoId = useId()
 </script>
 
 <template>
-  <BasePopover v-model="infoOpen" placement="bottom-start" trigger="hover-click">
-    <template #trigger>
-      <BaseButton
-        size="sm"
-        variant="ghost"
+  <ZPopover v-model="infoOpen" placement="bottom-start" trigger="hover-click">
+    <template #reference>
+      <ZButton
+        size="small" variant="text"
         aria-label="价格单位：美元 / 百万 Token，查看定价说明"
         :aria-expanded="infoOpen"
         :aria-controls="infoOpen ? infoId : undefined"
       >
         <span aria-hidden="true">USD / 1M Tokens</span>
         <Info class="size-3.5" aria-hidden="true" />
-      </BaseButton>
+      </ZButton>
     </template>
     <div :id="infoId" class="grid w-72 gap-2 p-3 text-cp-xs leading-relaxed text-cp-text-secondary">
       <p class="m-0 font-emphasis text-cp-text">
@@ -32,5 +31,5 @@ const infoId = useId()
         表中为标准档生效价，图像模型显示图像 Token 价格，划线为来源价，其他档位在编辑中查看
       </p>
     </div>
-  </BasePopover>
+  </ZPopover>
 </template>
diff --git a/frontend/src/views/settings/pricing/index.vue b/frontend/src/views/settings/pricing/index.vue
index 93ea55040..c3586409c 100644
--- a/frontend/src/views/settings/pricing/index.vue
+++ b/frontend/src/views/settings/pricing/index.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { PricingRow } from './model'
 import type { ModelPricing, PricingChange } from '@/api'
-import { BaseButton, BaseConfirmModal, BaseEmpty, BaseTablePagination } from '@codex-proxy/ui'
+import { ZButton, ZConfirmDialog, ZEmpty, ZPagination } from '@codex-proxy/ui'
 import { CircleAlert } from '@lucide/vue'
 import { computed, ref, shallowRef } from 'vue'
 import PricingBatchModal from './PricingBatchModal.vue'
@@ -68,20 +68,20 @@ function requestDelete(row: PricingRow) {
     />
     <PricingTable class="min-h-0 flex-1" :rows="error ? [] : visible" :selected="selected" :loading="loading" :disabled="disabled" @toggle="toggle" @toggle-page="togglePage" @edit="edit" @delete="requestDelete">
       <template v-if="error" #empty>
-        <BaseEmpty title="价目加载失败" :description="error" :icon="CircleAlert" surface="none" class="w-full max-w-80" role="alert">
+        <ZEmpty title="价目加载失败" :description="error" :icon="CircleAlert" surface="none" class="w-full max-w-80" role="alert">
           <template #action>
-            <BaseButton :loading="loading" @click="load">
+            <ZButton :loading="loading" @click="load">
               重试
-            </BaseButton>
+            </ZButton>
           </template>
-        </BaseEmpty>
+        </ZEmpty>
       </template>
     </PricingTable>
-    <BaseTablePagination :pagination="pagination" :loading="loading" @page-change="page = $event" @page-size-change="pageSize = $event" />
+    <ZPagination v-bind="pagination" :disabled="loading" @current-change="page = $event" @size-change="pageSize = $event" />
     <PricingEditor v-model="editorOpen" :row="editing" :provider="provider" :saving="saving" @save="saveModel" />
-    <BaseConfirmModal v-model="deleteOpen" title="删除模型价目" description="删除该模型的同步与自定义价格，历史账单不变" destructive confirm-text="删除" :loading="saving" @confirm="deleteModel">
+    <ZConfirmDialog v-model="deleteOpen" title="删除模型价目" description="删除该模型的同步与自定义价格，历史账单不变" destructive confirm-text="删除" :loading="saving" @confirm="deleteModel">
       <span class="break-all font-mono text-cp-sm font-normal">{{ deleting?.model }}</span>
-    </BaseConfirmModal>
+    </ZConfirmDialog>
     <PricingBatchModal v-model="batchOpen" :rows="targets" :reset="batchReset" :saving="saving" @confirm="saveBatch" />
     <PricingSyncModal v-model="syncOpen" :preview="preview" :catalog="syncCatalog" :saving="saving" @confirm="confirmSync" />
   </section>
diff --git a/frontend/src/views/settings/pricing/usePricing.ts b/frontend/src/views/settings/pricing/usePricing.ts
index 902547d80..a98e36ab8 100644
--- a/frontend/src/views/settings/pricing/usePricing.ts
+++ b/frontend/src/views/settings/pricing/usePricing.ts
@@ -1,5 +1,5 @@
 import type { PricingCatalog, PricingChange, PricingSyncPreview } from '@/api'
-import { toast } from '@codex-proxy/ui'
+import { ZNotification } from '@codex-proxy/ui'
 import { computed, onMounted, ref, shallowRef, watch } from 'vue'
 import { getPricing, previewPricingSync, syncPricing, updatePricing } from '@/api'
 import { useAsyncAction } from '@/composables/useAsyncAction'
@@ -48,7 +48,7 @@ export function usePricing() {
   async function save(models: string[], change: PricingChange): Promise<boolean> {
     return await writeAction.run(async () => {
       await updatePricing({ provider: provider.value, models, change })
-      toast.success(change.action === 'delete' ? '模型价目已删除' : change.action === 'reset' ? '已清除人工覆盖' : '模型定价已保存')
+      ZNotification.success({ message: change.action === 'delete' ? '模型价目已删除' : change.action === 'reset' ? '已清除人工覆盖' : '模型定价已保存' })
       selected.value = []
       await load()
       return true
@@ -68,7 +68,7 @@ export function usePricing() {
     await writeAction.run(async () => {
       await syncPricing({ preview: approved, models })
       syncOpen.value = false
-      toast.success('来源价目已同步，人工覆盖保持不变')
+      ZNotification.success({ message: '来源价目已同步，人工覆盖保持不变' })
       await load()
     })
   }
diff --git a/frontend/src/views/theme/components/AppearanceSettingsSection.vue b/frontend/src/views/theme/components/AppearanceSettingsSection.vue
index 8c2297e1b..18fd56ad4 100644
--- a/frontend/src/views/theme/components/AppearanceSettingsSection.vue
+++ b/frontend/src/views/theme/components/AppearanceSettingsSection.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { BaseButton, BaseInput, BasePageHeader, BaseScrollbar, BaseSegmented, toast } from '@codex-proxy/ui'
+import { ZButton, ZInput, ZNotification, ZPageHeader, ZScrollbar, ZSegmented } from '@codex-proxy/ui'
 
 import { Check, RotateCcw, Save, Search, Undo2 } from '@lucide/vue'
 
@@ -46,16 +46,16 @@ function switchScope(value: string) {
 
 function saveTheme(event: MouseEvent) {
   if (!save(event)) {
-    toast.error('主题设置无效，请检查编辑值')
+    ZNotification.error({ message: '主题设置无效，请检查编辑值' })
     return
   }
-  toast.success('主题已保存并应用')
+  ZNotification.success({ message: '主题已保存并应用' })
 }
 </script>
 
 <template>
   <div class="flex min-h-0 w-full flex-col">
-    <BasePageHeader class="xl:h-17" title="主题设置">
+    <ZPageHeader class="xl:h-17" title="主题设置">
       <template #description>
         <span class="flex flex-wrap items-center gap-x-2 gap-y-1">
           <span>自定义当前浏览器中的管理端配色与界面风格</span>
@@ -71,35 +71,35 @@ function saveTheme(event: MouseEvent) {
 
       <template #actions>
         <div class="flex flex-wrap items-center justify-end gap-2">
-          <BaseSegmented
+          <ZSegmented
             :model-value="scope"
-            label="主题编辑层级"
+            aria-label="主题编辑层级"
             :options="scopeOptions"
-            size="sm"
+            size="small"
             @update:model-value="switchScope"
           />
-          <BaseButton size="sm" variant="ghost" :disabled="!dirty" @click="resetDraft">
+          <ZButton size="small" variant="text" :disabled="!dirty" @click="resetDraft">
             <template #icon>
               <Undo2 class="size-3.5" />
             </template>
             撤销草稿
-          </BaseButton>
-          <BaseButton size="sm" variant="secondary" @click="restoreDefaults">
+          </ZButton>
+          <ZButton size="small" @click="restoreDefaults">
             <template #icon>
               <RotateCcw class="size-3.5" />
             </template>
             恢复默认
-          </BaseButton>
-          <BaseButton size="sm" variant="primary" :disabled="!dirty" @click="saveTheme">
+          </ZButton>
+          <ZButton size="small" type="primary" :disabled="!dirty" @click="saveTheme">
             <template #icon>
               <Save v-if="dirty" class="size-3.5" />
               <Check v-else class="size-3.5" />
             </template>
             {{ dirty ? '保存并应用' : '已保存' }}
-          </BaseButton>
+          </ZButton>
         </div>
       </template>
-    </BasePageHeader>
+    </ZPageHeader>
 
     <section
       class="theme-workbench isolate mt-5 overflow-hidden rounded-cp-card bg-cp-bg-layout shadow-cp-card xl:flex xl:min-h-0 xl:flex-1 xl:flex-col"
@@ -112,7 +112,7 @@ function saveTheme(event: MouseEvent) {
           class="grid h-full min-h-0 grid-rows-[auto_minmax(0,1fr)] gap-3 overflow-hidden rounded-cp-lg bg-cp-bg-container pt-3 pr-0 pb-3 pl-3 shadow-cp-secondary"
           aria-label="主题 Token 编辑面板"
         >
-          <BaseInput
+          <ZInput
             v-model="query"
             class="mr-3"
             aria-label="搜索 Token"
@@ -121,9 +121,9 @@ function saveTheme(event: MouseEvent) {
             <template #prefix>
               <Search class="size-4" />
             </template>
-          </BaseInput>
+          </ZInput>
 
-          <BaseScrollbar class="h-full min-h-0">
+          <ZScrollbar class="h-full min-h-0">
             <div class="pr-4">
               <ThemeGlobalTokenPanel
                 v-if="scope === 'global'"
@@ -150,7 +150,7 @@ function saveTheme(event: MouseEvent) {
                 @reset-component-number="resetComponentNumber"
               />
             </div>
-          </BaseScrollbar>
+          </ZScrollbar>
         </aside>
 
         <div class="hidden min-h-0 min-[768px]:block">
diff --git a/frontend/src/views/theme/components/ThemeColorTokenField.vue b/frontend/src/views/theme/components/ThemeColorTokenField.vue
index 658b93154..0e9243dfa 100644
--- a/frontend/src/views/theme/components/ThemeColorTokenField.vue
+++ b/frontend/src/views/theme/components/ThemeColorTokenField.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { BaseColorPicker, BaseIconButton } from '@codex-proxy/ui'
+import { ZColorPicker, ZIconButton } from '@codex-proxy/ui'
 
 import { themeTokenAllowsAlpha } from '@codex-proxy/ui/theme'
 import { RotateCcw } from '@lucide/vue'
@@ -43,23 +43,22 @@ const emit = defineEmits<{
     </div>
 
     <div class="flex items-center gap-1.5 rounded-cp bg-cp-bg-container p-1 shadow-cp-tertiary">
-      <BaseColorPicker
+      <ZColorPicker
         :model-value="value"
         :presets="presets"
         :allow-alpha="themeTokenAllowsAlpha(token)"
-        :label="`编辑 ${label}`"
+        :aria-label="`编辑 ${label}`"
         @update:model-value="emit('change', $event)"
       />
       <span class="min-w-17 font-mono text-[10px] tabular-nums text-cp-text-secondary">{{ value }}</span>
-      <BaseIconButton
+      <ZIconButton
         v-if="overridden"
-        label="恢复派生值"
-        size="sm"
-        variant="ghost"
+        aria-label="恢复派生值"
+        size="small"
         @click="emit('reset')"
       >
         <RotateCcw class="size-3.5" />
-      </BaseIconButton>
+      </ZIconButton>
     </div>
   </div>
 </template>
diff --git a/frontend/src/views/theme/components/ThemeComponentPreview.vue b/frontend/src/views/theme/components/ThemeComponentPreview.vue
index e3474a91c..9c67118b5 100644
--- a/frontend/src/views/theme/components/ThemeComponentPreview.vue
+++ b/frontend/src/views/theme/components/ThemeComponentPreview.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { BaseTablePaginationState } from '@codex-proxy/ui'
+import type { PaginationState } from '@codex-proxy/ui'
 
-import { BaseButton, BaseCard, BaseCheckbox, BaseColorPicker, BaseEmpty, BaseForm, BaseIconButton, BaseInput, BaseMenuItem, BaseMotionIcon, BaseNumberInput, BasePopover, BaseRadio, BaseRange, BaseSegmented, BaseSelect, BaseSkeleton, BaseSwitch, BaseTable, BaseTablePagination, BaseTag, BaseTextarea, defineTableColumns, BaseFormItem as FormItem } from '@codex-proxy/ui'
+import { defineTableColumns, ZFormItem as FormItem, ZButton, ZCard, ZCheckbox, ZColorPicker, ZEmpty, ZForm, ZIconButton, ZInput, ZInputNumber, ZMenuItem, ZMotionIcon, ZPagination, ZPopover, ZRadio, ZSegmented, ZSelect, ZSkeleton, ZSlider, ZSwitch, ZTable, ZTag, ZTextarea } from '@codex-proxy/ui'
 
 import {
   Bell,
@@ -83,7 +83,7 @@ const tableRows: PreviewTableRow[] = [
   { id: 'fallback', account: 'fallback@example.com', provider: 'xAI', status: '异常', requests: '3,172', latency: '—', updatedAt: '12 分钟前' },
   { id: 'disabled', account: 'disabled@example.com', provider: 'OpenAI', status: '停用', requests: '0', latency: '—', updatedAt: '2 小时前' },
 ]
-const pagination: BaseTablePaginationState = {
+const pagination: PaginationState = {
   currentPage: 2,
   pageSize: 20,
   total: 1_182,
@@ -133,7 +133,7 @@ function statusClass(status: PreviewTableRow['status']) {
     </header>
 
     <section class="grid min-w-0 grid-cols-12 gap-6" aria-label="基础控制组件">
-      <BaseCard padding="compact" class="col-span-7 h-full min-w-0 bg-cp-fill-quaternary! shadow-none!" title="按钮与动作" description="BaseButton · BaseIconButton · BaseMotionIcon">
+      <ZCard padding="compact" class="col-span-7 h-full min-w-0 bg-cp-fill-quaternary! shadow-none!" title="按钮与动作" description="ZButton · ZIconButton · ZMotionIcon">
         <template #body>
           <div class="grid flex-1 content-start gap-6">
             <div>
@@ -141,27 +141,27 @@ function statusClass(status: PreviewTableRow['status']) {
                 Button / action
               </p>
               <div class="flex flex-wrap items-center gap-3">
-                <BaseButton variant="primary">
+                <ZButton type="primary">
                   <template #icon>
                     <Plus class="size-4" />
                   </template>
                   创建账号
-                </BaseButton>
-                <BaseButton variant="secondary">
+                </ZButton>
+                <ZButton>
                   <template #icon>
                     <Download class="size-4" />
                   </template>
                   导出数据
-                </BaseButton>
-                <BaseButton variant="ghost">
+                </ZButton>
+                <ZButton variant="text">
                   稍后处理
-                </BaseButton>
-                <BaseButton variant="destructive">
+                </ZButton>
+                <ZButton type="danger" variant="plain">
                   <template #icon>
                     <Trash2 class="size-4" />
                   </template>
                   删除
-                </BaseButton>
+                </ZButton>
               </div>
             </div>
 
@@ -171,112 +171,113 @@ function statusClass(status: PreviewTableRow['status']) {
                   尺寸与禁用状态
                 </p>
                 <div class="flex flex-wrap items-center gap-3">
-                  <BaseButton size="sm" variant="primary">
+                  <ZButton size="small" type="primary">
                     Small
-                  </BaseButton>
-                  <BaseButton size="md" variant="primary">
+                  </ZButton>
+                  <ZButton size="default" type="primary">
                     Medium
-                  </BaseButton>
-                  <BaseButton size="lg" variant="primary">
+                  </ZButton>
+                  <ZButton size="large" type="primary">
                     Large
-                  </BaseButton>
-                  <BaseButton disabled>
+                  </ZButton>
+                  <ZButton disabled>
                     不可操作
-                  </BaseButton>
-                  <BaseButton loading>
+                  </ZButton>
+                  <ZButton loading>
                     处理中
-                  </BaseButton>
+                  </ZButton>
                 </div>
               </div>
               <div class="flex items-center gap-2">
-                <BaseIconButton label="通知" variant="secondary">
-                  <BaseMotionIcon>
+                <ZIconButton aria-label="通知" variant="solid">
+                  <ZMotionIcon>
                     <Bell />
-                  </BaseMotionIcon>
-                </BaseIconButton>
-                <BaseIconButton label="更多操作" variant="secondary">
+                  </ZMotionIcon>
+                </ZIconButton>
+                <ZIconButton aria-label="更多操作" variant="solid">
                   <MoreHorizontal />
-                </BaseIconButton>
-                <BaseIconButton label="删除记录" variant="destructive">
+                </ZIconButton>
+                <ZIconButton aria-label="删除记录" type="danger">
                   <Trash2 />
-                </BaseIconButton>
+                </ZIconButton>
               </div>
             </div>
           </div>
         </template>
-      </BaseCard>
+      </ZCard>
 
-      <BaseCard padding="compact" class="col-span-5 h-full min-w-0 bg-cp-fill-quaternary! shadow-none!" title="表单与输入" description="BaseInput · BaseSelect · BaseNumberInput · BaseRange · BaseTextarea · BaseColorPicker">
+      <ZCard padding="compact" class="col-span-5 h-full min-w-0 bg-cp-fill-quaternary! shadow-none!" title="表单与输入" description="ZInput · ZSelect · ZInputNumber · ZSlider · ZTextarea · ZColorPicker">
         <template #body>
-          <BaseForm class="grid-cols-2 gap-3!">
-            <BaseInput v-model="search" aria-label="搜索账号" placeholder="搜索账号">
+          <ZForm class="grid-cols-2 gap-3!">
+            <ZInput v-model="search" aria-label="搜索账号" placeholder="搜索账号">
               <template #prefix>
                 <Search class="size-4" />
               </template>
-            </BaseInput>
-            <BaseSelect v-model="provider" aria-label="选择平台" :options="providerOptions" />
-            <BaseInput v-model="invalidKey" aria-label="访问密钥错误示例" aria-invalid="true">
+            </ZInput>
+            <ZSelect v-model="provider" aria-label="选择平台" :options="providerOptions" />
+            <ZInput v-model="invalidKey" aria-label="访问密钥错误示例" aria-invalid="true">
               <template #prefix>
                 <KeyRound class="size-4" />
               </template>
-            </BaseInput>
-            <BaseInput v-model="disabledText" aria-label="禁用输入框" disabled />
-            <FormItem label="品牌颜色" description="BaseColorPicker">
-              <BaseColorPicker
+            </ZInput>
+            <ZInput v-model="disabledText" aria-label="禁用输入框" disabled />
+            <FormItem label="品牌颜色" description="ZColorPicker">
+              <ZColorPicker
                 v-model="brandColor"
-                label="编辑品牌颜色"
+                aria-label="编辑品牌颜色"
                 :allow-alpha="false"
                 :presets="['#5983F4', '#0F766E', '#7C3AED', '#475569']"
               />
             </FormItem>
-            <FormItem label="调度备注" description="BaseTextarea">
-              <BaseTextarea v-model="notes" aria-label="调度备注" :rows="2" />
+            <FormItem label="调度备注" description="ZTextarea">
+              <ZTextarea v-model="notes" aria-label="调度备注" :rows="2" />
             </FormItem>
-            <FormItem class="col-span-2" label="控件高度" description="BaseNumberInput · BaseRange">
+            <FormItem class="col-span-2" label="控件高度" description="ZInputNumber · ZSlider">
               <div class="flex items-center gap-3">
-                <BaseNumberInput
+                <ZInputNumber
                   v-model="controlHeight"
-                  label="组件示例控件高度"
+                  size="small"
+                  aria-label="组件示例控件高度"
                   :min="28"
                   :max="52"
                   unit="px"
                 />
-                <BaseRange
+                <ZSlider
                   v-model="controlHeight"
                   class="min-w-0 flex-1"
-                  label="组件示例控件高度"
+                  aria-label="组件示例控件高度"
                   :min="28"
                   :max="52"
                   unit="px"
                 />
               </div>
             </FormItem>
-          </BaseForm>
+          </ZForm>
         </template>
-      </BaseCard>
+      </ZCard>
     </section>
 
     <section class="grid min-w-0 grid-cols-12 gap-6" aria-label="选择与反馈组件">
-      <BaseCard padding="compact" class="col-span-4 h-full min-w-0 bg-cp-fill-quaternary! shadow-none!" title="选择与切换" description="BaseSegmented · BaseSwitch · BaseCheckbox · BaseRadio">
+      <ZCard padding="compact" class="col-span-4 h-full min-w-0 bg-cp-fill-quaternary! shadow-none!" title="选择与切换" description="ZSegmented · ZSwitch · ZCheckbox · ZRadio">
         <template #body>
           <div class="grid gap-5">
-            <BaseSegmented v-model="view" label="账号视图" :options="viewOptions" class="w-full" />
+            <ZSegmented v-model="view" aria-label="账号视图" :options="viewOptions" class="w-full" />
             <div class="flex flex-wrap items-center gap-x-7 gap-y-4">
-              <BaseSwitch v-model="notifications" label="实时通知" show-label />
-              <BaseSwitch v-model="autoRotate" label="自动轮换" show-label />
-              <BaseCheckbox v-model="selected" label="选择当前页" show-label />
-              <BaseCheckbox v-model="partialSelected" label="部分选择" indeterminate show-label />
+              <ZSwitch v-model="notifications" label="实时通知" />
+              <ZSwitch v-model="autoRotate" label="自动轮换" />
+              <ZCheckbox v-model="selected" label="选择当前页" />
+              <ZCheckbox v-model="partialSelected" label="部分选择" indeterminate />
             </div>
             <div class="flex items-center gap-6">
-              <BaseRadio v-model="strategy" value="balanced" name="strategy" label="均衡" show-label />
-              <BaseRadio v-model="strategy" value="sticky" name="strategy" label="粘性" show-label />
-              <BaseRadio v-model="strategy" value="manual" name="strategy" label="手动" show-label />
+              <ZRadio v-model="strategy" value="balanced" name="strategy" label="均衡" />
+              <ZRadio v-model="strategy" value="sticky" name="strategy" label="粘性" />
+              <ZRadio v-model="strategy" value="manual" name="strategy" label="手动" />
             </div>
           </div>
         </template>
-      </BaseCard>
+      </ZCard>
 
-      <BaseCard padding="compact" class="col-span-4 h-full min-w-0 bg-cp-fill-quaternary! shadow-none!" title="反馈语义" description="Success · Warning · Error · Info">
+      <ZCard padding="compact" class="col-span-4 h-full min-w-0 bg-cp-fill-quaternary! shadow-none!" title="反馈语义" description="Success · Warning · Error · Info">
         <template #body>
           <div class="grid gap-2.5">
             <div class="flex items-center gap-3 rounded-cp bg-cp-success-container px-3.5 py-3 text-cp-success-on-container">
@@ -293,27 +294,27 @@ function statusClass(status: PreviewTableRow['status']) {
             </div>
           </div>
         </template>
-      </BaseCard>
+      </ZCard>
 
-      <BaseCard padding="compact" class="col-span-4 h-full min-w-0 bg-cp-fill-quaternary! shadow-none!" title="状态与进度" description="BaseTag · Progress Token">
+      <ZCard padding="compact" class="col-span-4 h-full min-w-0 bg-cp-fill-quaternary! shadow-none!" title="状态与进度" description="ZTag · Progress Token">
         <template #body>
           <div class="grid gap-4">
             <div class="flex flex-wrap gap-2">
-              <BaseTag type="success" round>
+              <ZTag type="success" round>
                 运行正常
-              </BaseTag>
-              <BaseTag type="warning" round>
+              </ZTag>
+              <ZTag type="warning" round>
                 额度受限
-              </BaseTag>
-              <BaseTag type="danger" round>
+              </ZTag>
+              <ZTag type="danger" round>
                 需要处理
-              </BaseTag>
-              <BaseTag v-if="syncTagVisible" type="info" round closable @close="syncTagVisible = false">
+              </ZTag>
+              <ZTag v-if="syncTagVisible" type="info" round closable @close="syncTagVisible = false">
                 同步中
-              </BaseTag>
-              <BaseButton v-else size="sm" variant="ghost" @click="syncTagVisible = true">
+              </ZTag>
+              <ZButton v-else size="small" variant="text" @click="syncTagVisible = true">
                 恢复标签
-              </BaseButton>
+              </ZButton>
             </div>
             <div v-for="item in progressItems" :key="item.label" class="grid gap-2">
               <div class="flex justify-between text-cp-sm font-heavy text-cp-text-secondary">
@@ -325,20 +326,20 @@ function statusClass(status: PreviewTableRow['status']) {
             </div>
           </div>
         </template>
-      </BaseCard>
+      </ZCard>
     </section>
 
-    <BaseCard padding="compact" class="h-full min-w-0 bg-cp-fill-quaternary! shadow-none!" title="数据表格" description="BaseTable · BaseScrollbar · BaseTablePagination（标准行高）">
+    <ZCard padding="compact" class="h-full min-w-0 bg-cp-fill-quaternary! shadow-none!" title="数据表格" description="ZTable · ZScrollbar · ZPagination（标准行高）">
       <template #actions>
-        <BaseInput aria-label="筛选表格" size="sm" placeholder="筛选账号" class="w-64">
+        <ZInput aria-label="筛选表格" size="small" placeholder="筛选账号" class="w-64">
           <template #prefix>
             <Search class="size-3.5" />
           </template>
-        </BaseInput>
+        </ZInput>
       </template>
       <template #body>
         <div class="grid min-h-0 flex-1 grid-rows-[minmax(0,1fr)_auto]">
-          <BaseTable :columns="tableColumns" :rows="tableRows">
+          <ZTable :columns="tableColumns" :data="tableRows">
             <template #account="{ row }">
               <div class="grid gap-1">
                 <strong class="font-mono text-cp-sm text-cp-text">{{ row.account }}</strong>
@@ -350,52 +351,52 @@ function statusClass(status: PreviewTableRow['status']) {
                 {{ row.status }}
               </span>
             </template>
-          </BaseTable>
-          <BaseTablePagination :pagination="pagination" :loading="false" />
+          </ZTable>
+          <ZPagination v-bind="pagination" :disabled="false" />
         </div>
       </template>
-    </BaseCard>
+    </ZCard>
 
     <section class="grid min-w-0 grid-cols-12 gap-6 overflow-hidden" aria-label="边界状态组件">
-      <BaseCard padding="compact" class="col-span-4 h-full min-w-0 bg-cp-fill-quaternary! shadow-none!" title="空状态" description="BaseEmpty · BaseButton">
+      <ZCard padding="compact" class="col-span-4 h-full min-w-0 bg-cp-fill-quaternary! shadow-none!" title="空状态" description="ZEmpty · ZButton">
         <template #body>
-          <BaseEmpty title="暂无匹配账号" description="调整筛选条件，或添加一个新的上游账号" class="flex-1">
+          <ZEmpty title="暂无匹配账号" description="调整筛选条件，或添加一个新的上游账号" class="flex-1">
             <template #action>
-              <BaseButton size="sm" variant="primary">
+              <ZButton size="small" type="primary">
                 添加账号
-              </BaseButton>
+              </ZButton>
             </template>
-          </BaseEmpty>
+          </ZEmpty>
         </template>
-      </BaseCard>
+      </ZCard>
 
-      <BaseCard padding="compact" class="col-span-4 h-full min-w-0 bg-cp-fill-quaternary! shadow-none!" title="加载与骨架" description="BaseSkeleton · BaseButton loading">
+      <ZCard padding="compact" class="col-span-4 h-full min-w-0 bg-cp-fill-quaternary! shadow-none!" title="加载与骨架" description="ZSkeleton · ZButton loading">
         <template #body>
           <div class="grid flex-1 content-between gap-5 rounded-cp-lg bg-cp-fill-quaternary p-4">
             <div class="grid gap-4">
               <div class="flex items-center gap-3">
-                <BaseSkeleton class="size-10 shrink-0" />
+                <ZSkeleton class="size-10 shrink-0" />
                 <div class="grid flex-1 gap-2">
-                  <BaseSkeleton shape="text" class="w-2/5" />
-                  <BaseSkeleton shape="text" class="h-2.5 w-3/5 opacity-60" />
+                  <ZSkeleton shape="text" class="w-2/5" />
+                  <ZSkeleton shape="text" class="h-2.5 w-3/5 opacity-60" />
                 </div>
               </div>
-              <BaseSkeleton class="h-18 opacity-60" />
+              <ZSkeleton class="h-18 opacity-60" />
               <div class="grid grid-cols-3 gap-3">
-                <BaseSkeleton v-for="index in 3" :key="index" class="h-12 opacity-60" />
+                <ZSkeleton v-for="index in 3" :key="index" class="h-12 opacity-60" />
               </div>
             </div>
             <div class="flex items-center justify-between">
               <span class="text-cp-sm font-emphasis text-cp-text-secondary">正在同步账号状态</span>
-              <BaseButton size="sm" loading>
+              <ZButton size="small" loading>
                 同步中
-              </BaseButton>
+              </ZButton>
             </div>
           </div>
         </template>
-      </BaseCard>
+      </ZCard>
 
-      <BaseCard padding="compact" class="col-span-4 h-full min-w-0 bg-cp-fill-quaternary! shadow-none!" title="浮层与菜单" description="BasePopover · BaseMenuItem · Elevated Surface">
+      <ZCard padding="compact" class="col-span-4 h-full min-w-0 bg-cp-fill-quaternary! shadow-none!" title="浮层与菜单" description="ZPopover · ZMenuItem · Elevated Surface">
         <template #body>
           <div class="grid min-w-0 flex-1 grid-rows-[auto_1fr_auto] overflow-hidden rounded-cp-lg bg-cp-bg-container p-4">
             <div class="flex items-center justify-between rounded-cp bg-cp-bg-container px-4 py-3 shadow-cp-tertiary">
@@ -403,41 +404,41 @@ function statusClass(status: PreviewTableRow['status']) {
                 <strong class="block text-cp-sm text-cp-text">relay@example.com</strong>
                 <span class="mt-1 block text-[10px] text-cp-text-quaternary">OpenAI · OAuth</span>
               </div>
-              <BasePopover>
-                <template #trigger>
-                  <BaseIconButton label="账号操作" variant="secondary">
+              <ZPopover>
+                <template #reference>
+                  <ZIconButton aria-label="账号操作" variant="solid">
                     <MoreHorizontal />
-                  </BaseIconButton>
+                  </ZIconButton>
                 </template>
                 <div class="w-64 max-w-full p-2">
-                  <BaseMenuItem>编辑账号</BaseMenuItem>
-                  <BaseMenuItem>测试连接</BaseMenuItem>
-                  <BaseMenuItem tone="destructive">
+                  <ZMenuItem>编辑账号</ZMenuItem>
+                  <ZMenuItem>测试连接</ZMenuItem>
+                  <ZMenuItem type="danger">
                     停用账号
-                  </BaseMenuItem>
+                  </ZMenuItem>
                 </div>
-              </BasePopover>
+              </ZPopover>
             </div>
 
             <div class="mt-3 ml-auto w-64 max-w-full self-start rounded-cp-lg bg-cp-bg-elevated p-2 shadow-cp">
-              <BaseMenuItem>
+              <ZMenuItem>
                 <template #icon>
                   <KeyRound class="size-3.5" />
                 </template>
                 编辑账号
-              </BaseMenuItem>
-              <BaseMenuItem>
+              </ZMenuItem>
+              <ZMenuItem>
                 <template #icon>
                   <Info class="size-3.5" />
                 </template>
                 测试连接
-              </BaseMenuItem>
-              <BaseMenuItem tone="destructive">
+              </ZMenuItem>
+              <ZMenuItem type="danger">
                 <template #icon>
                   <Trash2 class="size-3.5" />
                 </template>
                 停用账号
-              </BaseMenuItem>
+              </ZMenuItem>
             </div>
 
             <div class="flex min-w-0 items-center gap-3 rounded-cp bg-cp-bg-spotlight px-4 py-3 text-cp-text-light-solid shadow-cp-popup">
@@ -446,7 +447,7 @@ function statusClass(status: PreviewTableRow['status']) {
             </div>
           </div>
         </template>
-      </BaseCard>
+      </ZCard>
     </section>
   </div>
 </template>
diff --git a/frontend/src/views/theme/components/ThemeEditorPreview.vue b/frontend/src/views/theme/components/ThemeEditorPreview.vue
index 2f73c88ba..e5ee13fa4 100644
--- a/frontend/src/views/theme/components/ThemeEditorPreview.vue
+++ b/frontend/src/views/theme/components/ThemeEditorPreview.vue
@@ -3,7 +3,7 @@ import type { ThemeName } from '@codex-proxy/ui/theme'
 import type { CSSProperties } from 'vue'
 import type { ThemeEditorPreview } from '../composables/useThemeEditor'
 
-import { BaseSegmented } from '@codex-proxy/ui'
+import { ZSegmented } from '@codex-proxy/ui'
 
 import ThemeComponentPreview from './ThemeComponentPreview.vue'
 import ThemeDashboardPreview from './ThemeDashboardPreview.vue'
@@ -29,7 +29,7 @@ const previewOptions = [
         <strong class="block text-cp-sm font-heavy text-cp-text">实时预览</strong>
         <span class="mt-0.5 block text-[9px] font-emphasis text-cp-text-quaternary">真实组件在影子环境隔离渲染，拖动画板并缩放检查细节</span>
       </div>
-      <BaseSegmented v-model="preview" label="预览类型" size="sm" :options="previewOptions" />
+      <ZSegmented v-model="preview" aria-label="预览类型" size="small" :options="previewOptions" />
     </header>
 
     <ThemePreviewCanvas
diff --git a/frontend/src/views/theme/components/ThemeGlobalTokenPanel.vue b/frontend/src/views/theme/components/ThemeGlobalTokenPanel.vue
index 6f0e11fa5..be94c198f 100644
--- a/frontend/src/views/theme/components/ThemeGlobalTokenPanel.vue
+++ b/frontend/src/views/theme/components/ThemeGlobalTokenPanel.vue
@@ -2,7 +2,7 @@
 import type { ResolvedTheme, ThemeColorPreset, ThemeColorPresetId, ThemeMode, ThemeSeedOverrides } from '@codex-proxy/ui/theme'
 import type { ThemeEditorDraft, ThemeEditorGlobalCategory } from '../composables/useThemeEditor'
 
-import { BaseSegmented } from '@codex-proxy/ui'
+import { ZSegmented } from '@codex-proxy/ui'
 import { resolveTheme, THEME_COLOR_PRESETS } from '@codex-proxy/ui/theme'
 
 import { Check, ChevronDown, Laptop, Moon, Sun } from '@lucide/vue'
@@ -136,9 +136,9 @@ function presetSwatches(preset: ThemeColorPreset) {
 <template>
   <div class="grid gap-4">
     <div class="grid gap-2 rounded-cp-lg bg-cp-bg-container p-2 shadow-cp-tertiary">
-      <BaseSegmented
+      <ZSegmented
         :model-value="draft.mode"
-        label="主题模式"
+        aria-label="主题模式"
         display="icon"
         :options="modeOptions"
         class="w-full"
@@ -146,7 +146,7 @@ function presetSwatches(preset: ThemeColorPreset) {
       />
     </div>
 
-    <BaseSegmented v-model="category" label="全局 Token 分类" :options="categoryOptions" class="w-full" />
+    <ZSegmented v-model="category" aria-label="全局 Token 分类" :options="categoryOptions" class="w-full" />
 
     <template v-if="category === 'color'">
       <section v-if="matches('预置主题 品牌色 colorPrimary')" class="grid gap-2" aria-labelledby="theme-preset-title">
diff --git a/frontend/src/views/theme/components/ThemeNumberTokenField.vue b/frontend/src/views/theme/components/ThemeNumberTokenField.vue
index 859c5f353..7f73e79b4 100644
--- a/frontend/src/views/theme/components/ThemeNumberTokenField.vue
+++ b/frontend/src/views/theme/components/ThemeNumberTokenField.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { BaseIconButton, BaseNumberInput, BaseRange } from '@codex-proxy/ui'
+import { ZIconButton, ZInputNumber, ZSlider } from '@codex-proxy/ui'
 
 import { RotateCcw } from '@lucide/vue'
 
@@ -31,32 +31,32 @@ const emit = defineEmits<{
         <code class="mt-1 block truncate font-mono text-[10px] text-cp-text-quaternary">{{ token }}</code>
       </div>
       <div class="flex items-center gap-1">
-        <BaseNumberInput
+        <ZInputNumber
+          size="small"
           :model-value="value"
-          :label="label"
+          :aria-label="label"
           :min="min"
           :max="max"
           :step="step ?? 1"
           :unit="unit ?? 'px'"
           @update:model-value="emit('change', $event)"
         />
-        <BaseIconButton
+        <ZIconButton
           v-if="overridden"
-          label="恢复派生值"
-          size="sm"
-          variant="ghost"
+          aria-label="恢复派生值"
+          size="small"
           @click="emit('reset')"
         >
           <RotateCcw class="size-3.5" />
-        </BaseIconButton>
+        </ZIconButton>
       </div>
     </div>
-    <BaseRange
+    <ZSlider
       :model-value="value"
       :min="min"
       :max="max"
       :step="step ?? 1"
-      :label="label"
+      :aria-label="label"
       :unit="unit ?? 'px'"
       @update:model-value="emit('change', $event)"
     />
diff --git a/frontend/src/views/theme/components/ThemePreviewCanvas.vue b/frontend/src/views/theme/components/ThemePreviewCanvas.vue
index 6dfdcf662..65f3820d5 100644
--- a/frontend/src/views/theme/components/ThemePreviewCanvas.vue
+++ b/frontend/src/views/theme/components/ThemePreviewCanvas.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { ThemeName } from '@codex-proxy/ui/theme'
 import type { CSSProperties } from 'vue'
-import { BaseButton, BaseIconButton } from '@codex-proxy/ui'
+import { ZButton, ZIconButton } from '@codex-proxy/ui'
 
 import { Maximize2, Minus, Move, Plus } from '@lucide/vue'
 import { computed, useTemplateRef } from 'vue'
@@ -69,25 +69,24 @@ const boardStyle = computed<CSSProperties>(() => ({
       @dblclick.stop
       @wheel.stop
     >
-      <BaseIconButton label="缩小画板" size="sm" variant="ghost" :disabled="!canZoomOut" @click="zoomOut">
+      <ZIconButton aria-label="缩小画板" size="small" :disabled="!canZoomOut" @click="zoomOut">
         <Minus class="size-3.5" />
-      </BaseIconButton>
-      <BaseButton
-        size="sm"
-        variant="ghost"
+      </ZIconButton>
+      <ZButton
+        size="small" variant="text"
         class="min-w-14 px-2! font-mono tabular-nums"
         title="恢复 100%"
         @click="resetScale"
       >
         {{ scalePercent }}%
-      </BaseButton>
-      <BaseIconButton label="放大画板" size="sm" variant="ghost" :disabled="!canZoomIn" @click="zoomIn">
+      </ZButton>
+      <ZIconButton aria-label="放大画板" size="small" :disabled="!canZoomIn" @click="zoomIn">
         <Plus class="size-3.5" />
-      </BaseIconButton>
+      </ZIconButton>
       <span class="mx-0.5 h-4 w-px bg-cp-fill-secondary" />
-      <BaseIconButton label="适应画板" size="sm" variant="ghost" @click="fitToViewport()">
+      <ZIconButton aria-label="适应画板" size="small" @click="fitToViewport()">
         <Maximize2 class="size-3.5" />
-      </BaseIconButton>
+      </ZIconButton>
     </div>
   </div>
 </template>
diff --git a/frontend/src/views/theme/components/ThemeTextTokenField.vue b/frontend/src/views/theme/components/ThemeTextTokenField.vue
index a566903d5..b2b84c8a0 100644
--- a/frontend/src/views/theme/components/ThemeTextTokenField.vue
+++ b/frontend/src/views/theme/components/ThemeTextTokenField.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { BaseIconButton, BaseInput } from '@codex-proxy/ui'
+import { ZIconButton, ZInput } from '@codex-proxy/ui'
 
 import { RotateCcw } from '@lucide/vue'
 
@@ -23,17 +23,16 @@ const emit = defineEmits<{
         <strong class="text-cp-sm font-bold text-cp-text">{{ label }}</strong>
         <code class="mt-1 block truncate font-mono text-[10px] text-cp-text-quaternary">{{ token }}</code>
       </div>
-      <BaseIconButton
+      <ZIconButton
         v-if="overridden"
-        label="恢复派生值"
-        size="sm"
-        variant="ghost"
+        aria-label="恢复派生值"
+        size="small"
         @click="emit('reset')"
       >
         <RotateCcw class="size-3.5" />
-      </BaseIconButton>
+      </ZIconButton>
     </div>
-    <BaseInput
+    <ZInput
       :model-value="value"
       :aria-label="label"
       class="font-mono"
diff --git a/frontend/src/views/usage/components/OpsErrorDetailModal.vue b/frontend/src/views/usage/components/OpsErrorDetailModal.vue
index 1488d647b..4123396e7 100644
--- a/frontend/src/views/usage/components/OpsErrorDetailModal.vue
+++ b/frontend/src/views/usage/components/OpsErrorDetailModal.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { OpsError } from '@/api'
 
-import { BaseButton, BaseModal } from '@codex-proxy/ui'
+import { ZButton, ZDialog } from '@codex-proxy/ui'
 import { computed } from 'vue'
 import { failureClassText } from '../utils/opsErrorPresentation'
 import RequestDiagnosticsPanel from './RequestDiagnosticsPanel.vue'
@@ -121,12 +121,12 @@ function visibleFields(items: DetailField[]) {
 </script>
 
 <template>
-  <BaseModal
+  <ZDialog
     v-model="open"
     title="错误明细"
     description="上游错误与请求上下文"
-    tone="danger"
-    size="xl"
+    type="danger"
+    width="64rem"
   >
     <template v-if="record">
       <RequestDiagnosticsPanel v-if="record.requestId" class="mb-3" :request-id="record.requestId" :metadata="record.metadata" :error-record="record" :active="open" />
@@ -180,9 +180,9 @@ function visibleFields(items: DetailField[]) {
     </template>
 
     <template #footer>
-      <BaseButton variant="primary" @click="open = false">
+      <ZButton type="primary" @click="open = false">
         关闭
-      </BaseButton>
+      </ZButton>
     </template>
-  </BaseModal>
+  </ZDialog>
 </template>
diff --git a/frontend/src/views/usage/components/OpsErrorPanel.vue b/frontend/src/views/usage/components/OpsErrorPanel.vue
index 79b3e5b2f..cf87075e6 100644
--- a/frontend/src/views/usage/components/OpsErrorPanel.vue
+++ b/frontend/src/views/usage/components/OpsErrorPanel.vue
@@ -2,7 +2,7 @@
 import type { UsageTimeRangeParams } from '../composables/useUsageTimeRange'
 import type { OpsError } from '@/api'
 
-import { BaseIconButton, BaseInput, BaseTable, BaseTableColumnSettings, BaseTablePagination, useTableColumns } from '@codex-proxy/ui'
+import { useTableColumns, ZIconButton, ZInput, ZPagination, ZTable, ZTableColumnSettings } from '@codex-proxy/ui'
 import { Eye, RefreshCw, Search } from '@lucide/vue'
 import { shallowRef, toRef } from 'vue'
 import AccountPlanBadge from '@/components/account/AccountPlanBadge.vue'
@@ -92,7 +92,7 @@ function upstreamSendStateText(value: string | null | undefined) {
       aria-label="错误筛选与操作"
     >
       <div class="min-w-0 flex-1">
-        <BaseInput
+        <ZInput
           v-model="searchQuery"
           placeholder="请求 ID、密钥名称或账号"
           aria-label="搜索错误：请求 ID、密钥名称或账号"
@@ -101,20 +101,19 @@ function upstreamSendStateText(value: string | null | undefined) {
           <template #prefix>
             <Search class="size-4.5 text-cp-text-tertiary" />
           </template>
-        </BaseInput>
+        </ZInput>
       </div>
 
       <div class="flex shrink-0 self-end items-center justify-end gap-2 lg:ml-auto">
-        <BaseTableColumnSettings
+        <ZTableColumnSettings
           :options="columnOptions"
           @change="setColumnVisible"
           @reorder="setColumnOrder"
           @reset="resetColumns"
         />
-        <BaseIconButton
-          variant="ghost"
-          size="md"
-          label="刷新错误明细"
+        <ZIconButton
+          size="default"
+          aria-label="刷新错误明细"
           :loading="refreshing"
           :disabled="loading || refreshing"
           @click="handleRefresh"
@@ -123,7 +122,7 @@ function upstreamSendStateText(value: string | null | undefined) {
             <RefreshCw class="size-4.5 animate-spin motion-reduce:animate-none" />
           </template>
           <RefreshCw class="size-4.5" />
-        </BaseIconButton>
+        </ZIconButton>
       </div>
     </div>
 
@@ -131,11 +130,11 @@ function upstreamSendStateText(value: string | null | undefined) {
       <p v-if="error && !loading" role="alert" class="text-cp-sm text-cp-error-text">
         {{ error }}，请刷新重试
       </p>
-      <BaseTable
+      <ZTable
         v-else
         class="min-h-0 flex-1"
         :columns="visibleColumns"
-        :rows="records"
+        :data="records"
         :loading="loading"
         empty-text="当前时段没有错误"
       >
@@ -216,21 +215,20 @@ function upstreamSendStateText(value: string | null | undefined) {
           </span>
         </template>
         <template #actions="{ row }">
-          <BaseIconButton
-            variant="ghost"
-            size="md"
-            label="查看错误详情"
+          <ZIconButton
+            size="default"
+            aria-label="查看错误详情"
             @click="showDetail(row)"
           >
             <Eye class="size-4.5" />
-          </BaseIconButton>
+          </ZIconButton>
         </template>
-      </BaseTable>
-      <BaseTablePagination
-        :pagination="pagination"
-        :loading="loading"
-        @page-change="handlePageChange"
-        @page-size-change="handlePageSizeChange"
+      </ZTable>
+      <ZPagination
+        v-bind="pagination"
+        :disabled="loading"
+        @current-change="handlePageChange"
+        @size-change="handlePageSizeChange"
       />
     </div>
   </div>
diff --git a/frontend/src/views/usage/components/RequestDiagnosticsPanel.vue b/frontend/src/views/usage/components/RequestDiagnosticsPanel.vue
index 74915bb20..0c74fea99 100644
--- a/frontend/src/views/usage/components/RequestDiagnosticsPanel.vue
+++ b/frontend/src/views/usage/components/RequestDiagnosticsPanel.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { OpsError, OpsErrorMetadata } from '@/api'
-import { BaseButton, BaseEmpty, BaseScrollbar } from '@codex-proxy/ui'
+import { ZButton, ZEmpty, ZScrollbar } from '@codex-proxy/ui'
 import { Download, RefreshCw } from '@lucide/vue'
 import { computed } from 'vue'
 import { useAsyncAction } from '@/composables/useAsyncAction'
@@ -40,21 +40,21 @@ function download() {
         请求诊断
       </h3>
       <div class="flex flex-wrap gap-2">
-        <BaseButton v-if="selectedId !== requestId" variant="soft" size="sm" @click="selectedId = requestId">
+        <ZButton v-if="selectedId !== requestId" type="primary" variant="plain" size="small" @click="selectedId = requestId">
           返回本次请求
-        </BaseButton>
-        <BaseButton variant="soft" size="sm" :loading="loading" @click="refresh">
+        </ZButton>
+        <ZButton type="primary" variant="plain" size="small" :loading="loading" @click="refresh">
           <template #icon>
             <RefreshCw :size="14" />
           </template>
           刷新
-        </BaseButton>
-        <BaseButton variant="soft" size="sm" :loading="exporting" :disabled="!canExport" @click="download">
+        </ZButton>
+        <ZButton type="primary" variant="plain" size="small" :loading="exporting" :disabled="!canExport" @click="download">
           <template #icon>
             <Download :size="14" />
           </template>
           导出诊断包
-        </BaseButton>
+        </ZButton>
       </div>
     </div>
     <p class="mt-1 mb-3 break-all font-mono text-cp-xs leading-relaxed text-cp-text-secondary">
@@ -68,12 +68,12 @@ function download() {
     </p>
     <template v-else-if="detail">
       <div v-if="detail.relatedRequests?.length" class="mb-3 flex flex-wrap gap-2">
-        <BaseButton v-for="related in detail.relatedRequests" :key="related.requestId" variant="soft" size="sm" class="max-w-full" @click="selectedId = related.requestId">
+        <ZButton v-for="related in detail.relatedRequests" :key="related.requestId" type="primary" variant="plain" size="small" class="max-w-full" @click="selectedId = related.requestId">
           {{ related.relation === 'recovered_by' ? '查看恢复请求' : '查看先前失败' }} · {{ related.requestId }}
-        </BaseButton>
+        </ZButton>
       </div>
       <RequestTransportFailure :events="trace?.events ?? []" :metadata="selectedId === requestId ? metadata : undefined" />
-      <BaseEmpty v-if="!events.length" title="暂无诊断时间线" size="sm" surface="none" />
+      <ZEmpty v-if="!events.length" title="暂无诊断时间线" size="small" surface="none" />
       <template v-else-if="trace">
         <div class="mb-3 grid gap-1 text-cp-xs leading-relaxed">
           <p class="m-0 text-cp-text-secondary">
@@ -83,7 +83,7 @@ function download() {
             已达保存上限，{{ trace.droppedEvents }} 个事件未保留
           </p>
         </div>
-        <BaseScrollbar max-height="32rem">
+        <ZScrollbar max-height="32rem">
           <ol class="m-0 grid list-none gap-2 p-0 pr-3">
             <li v-for="event in events" :key="event.sequence" class="min-w-0">
               <details class="group overflow-hidden rounded-cp bg-cp-bg-container">
@@ -100,7 +100,7 @@ function download() {
               </details>
             </li>
           </ol>
-        </BaseScrollbar>
+        </ZScrollbar>
       </template>
     </template>
   </section>
diff --git a/frontend/src/views/usage/components/UsageCostCard.vue b/frontend/src/views/usage/components/UsageCostCard.vue
index 6121a0260..4ba1467af 100644
--- a/frontend/src/views/usage/components/UsageCostCard.vue
+++ b/frontend/src/views/usage/components/UsageCostCard.vue
@@ -2,7 +2,7 @@
 import type { EChartsOption, LineSeriesOption } from 'echarts'
 import type { getUsageRecordInsightsOverview } from '@/api'
 
-import { BaseCard, BaseEmpty, BaseSegmented } from '@codex-proxy/ui'
+import { ZCard, ZEmpty, ZSegmented } from '@codex-proxy/ui'
 import { computed, shallowRef } from 'vue'
 import BaseChart from '@/components/charts/BaseChart.vue'
 import {
@@ -224,14 +224,14 @@ function costAmount(value: string | null, pointIndex: number) {
 </script>
 
 <template>
-  <BaseCard
+  <ZCard
     as="article"
     title="成本效率"
     description="实际费用、缓存节省、服务层溢价与单位成本"
     class="min-h-90 xl:h-full"
   >
     <template #actions>
-      <BaseSegmented v-model="activeView" label="成本视图" :options="viewOptions" :disabled="loading" class="w-50" />
+      <ZSegmented v-model="activeView" aria-label="成本视图" :options="viewOptions" :disabled="loading" class="w-50" />
     </template>
 
     <template #body>
@@ -269,9 +269,9 @@ function costAmount(value: string | null, pointIndex: number) {
           </div>
         </div>
         <BaseChart v-if="hasData" :option="chartOption" :height="210" />
-        <BaseEmpty
+        <ZEmpty
           v-else
-          size="sm"
+          size="small"
           surface="none"
           :title="loading ? '正在加载成本数据' : '暂无成本效率数据'"
           description="当前范围没有可绘制的费用或缓存收益数据"
@@ -279,5 +279,5 @@ function costAmount(value: string | null, pointIndex: number) {
         />
       </div>
     </template>
-  </BaseCard>
+  </ZCard>
 </template>
diff --git a/frontend/src/views/usage/components/UsageDetailCodePanel.vue b/frontend/src/views/usage/components/UsageDetailCodePanel.vue
index 4798df8c7..27a0ed668 100644
--- a/frontend/src/views/usage/components/UsageDetailCodePanel.vue
+++ b/frontend/src/views/usage/components/UsageDetailCodePanel.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { BaseScrollbar } from '@codex-proxy/ui'
+import { ZScrollbar } from '@codex-proxy/ui'
 
 // 详情弹窗的代码面板：标题 + 滚动区内的预格式化文本。
 defineProps<{
@@ -17,9 +17,9 @@ const codeBlockClass
   <h3 class="mb-3" :class="panelTitleClass">
     {{ title }}
   </h3>
-  <BaseScrollbar :max-height="maxHeight">
+  <ZScrollbar :max-height="maxHeight">
     <div class="rounded-cp bg-cp-bg-container px-3 py-2.5">
       <pre :class="codeBlockClass">{{ content }}</pre>
     </div>
-  </BaseScrollbar>
+  </ZScrollbar>
 </template>
diff --git a/frontend/src/views/usage/components/UsageDetailFieldGrid.vue b/frontend/src/views/usage/components/UsageDetailFieldGrid.vue
index 22f5c8356..a6f40d2e4 100644
--- a/frontend/src/views/usage/components/UsageDetailFieldGrid.vue
+++ b/frontend/src/views/usage/components/UsageDetailFieldGrid.vue
@@ -10,7 +10,7 @@ function valueClass(item: { mono?: boolean, wrap?: boolean }) {
   if (item.wrap) {
     return [
       'mt-1.5 mb-0 min-w-0 text-cp-sm leading-snug font-bold text-cp-text',
-      item.mono ? 'font-mono tabular-nums break-words' : undefined,
+      item.mono ? 'font-mono tabular-nums wrap-break-word' : undefined,
     ]
   }
   return fieldValueClass(item.mono)
diff --git a/frontend/src/views/usage/components/UsageDiagnosticCard.vue b/frontend/src/views/usage/components/UsageDiagnosticCard.vue
index 58bcaac1f..8e2034297 100644
--- a/frontend/src/views/usage/components/UsageDiagnosticCard.vue
+++ b/frontend/src/views/usage/components/UsageDiagnosticCard.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { TableColumnSize } from '@codex-proxy/ui'
 import type { getUsageRecordInsightsDiagnostics } from '@/api'
-import { BaseCard, BaseEmpty, BaseSegmented, BaseTable, defineTableColumns } from '@codex-proxy/ui'
+import { defineTableColumns, ZCard, ZEmpty, ZSegmented, ZTable } from '@codex-proxy/ui'
 
 import { CornerDownRight } from '@lucide/vue'
 import { computed } from 'vue'
@@ -108,16 +108,16 @@ function diagnosticNameDisplay(name: string) {
 </script>
 
 <template>
-  <BaseCard
+  <ZCard
     as="article"
     title="热点诊断"
     :description="`按${resultDimensionLabel}聚合`"
     class="max-h-105 min-w-0 w-full xl:h-full"
   >
     <template #actions>
-      <BaseSegmented
+      <ZSegmented
         v-model="dimension"
-        label="诊断维度"
+        aria-label="诊断维度"
         :options="dimensionOptions"
         :disabled="loading"
         class="w-full min-w-0 lg:w-80"
@@ -125,13 +125,13 @@ function diagnosticNameDisplay(name: string) {
     </template>
 
     <template #body>
-      <BaseTable
+      <ZTable
         v-if="hasData"
         :key="resultDimension"
         class="min-h-0 max-h-80 w-full xl:max-h-none xl:contain-[size]"
         :columns="diagnosticColumns"
-        :rows="displayItems"
-        density="compact"
+        :data="displayItems"
+        size="small"
         row-key="key"
         empty-text="暂无诊断数据"
       >
@@ -222,15 +222,15 @@ function diagnosticNameDisplay(name: string) {
             {{ formatUsd(row.estimatedCost) }}
           </span>
         </template>
-      </BaseTable>
-      <BaseEmpty
+      </ZTable>
+      <ZEmpty
         v-else
-        size="sm"
+        size="small"
         surface="none"
         :title="loading ? '正在加载热点诊断数据' : '暂无诊断数据'"
         description="当前范围没有可诊断的请求记录"
         class="h-full min-h-40 place-content-center"
       />
     </template>
-  </BaseCard>
+  </ZCard>
 </template>
diff --git a/frontend/src/views/usage/components/UsageFilters.vue b/frontend/src/views/usage/components/UsageFilters.vue
index af3f8ae18..fba2ed5d1 100644
--- a/frontend/src/views/usage/components/UsageFilters.vue
+++ b/frontend/src/views/usage/components/UsageFilters.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { BaseIconButton, BaseInput } from '@codex-proxy/ui'
+import { ZIconButton, ZInput } from '@codex-proxy/ui'
 
 import { RefreshCw, Search } from '@lucide/vue'
 
@@ -18,19 +18,18 @@ const search = defineModel<string>('search', { required: true })
 <template>
   <div class="flex w-full items-center gap-3" role="group" aria-label="使用记录筛选与操作">
     <div class="min-w-0 flex-1 sm:w-96 sm:flex-none">
-      <BaseInput v-model="search" placeholder="请求、密钥名称、账号或模型" aria-label="搜索使用记录：请求、密钥名称、账号或模型" class="w-full">
+      <ZInput v-model="search" placeholder="请求、密钥名称、账号或模型" aria-label="搜索使用记录：请求、密钥名称、账号或模型" class="w-full">
         <template #prefix>
           <Search class="size-4.5 text-cp-text-tertiary" />
         </template>
-      </BaseInput>
+      </ZInput>
     </div>
 
     <div class="ml-auto flex shrink-0 items-center justify-end gap-2">
       <slot name="actions" />
-      <BaseIconButton
-        variant="ghost"
-        size="md"
-        label="刷新使用记录"
+      <ZIconButton
+        size="default"
+        aria-label="刷新使用记录"
         :loading="refreshing"
         :disabled="loading || refreshing"
         @click="emit('refresh')"
@@ -39,7 +38,7 @@ const search = defineModel<string>('search', { required: true })
           <RefreshCw class="size-4.5 animate-spin motion-reduce:animate-none" />
         </template>
         <RefreshCw class="size-4.5" />
-      </BaseIconButton>
+      </ZIconButton>
     </div>
   </div>
 </template>
diff --git a/frontend/src/views/usage/components/UsageHealthCard.vue b/frontend/src/views/usage/components/UsageHealthCard.vue
index 25a89f499..f8148054f 100644
--- a/frontend/src/views/usage/components/UsageHealthCard.vue
+++ b/frontend/src/views/usage/components/UsageHealthCard.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { BarSeriesOption, EChartsOption, LineSeriesOption } from 'echarts'
 import type { getUsageRecordInsightsOverview } from '@/api'
-import { BaseCard, BaseEmpty } from '@codex-proxy/ui'
+import { ZCard, ZEmpty } from '@codex-proxy/ui'
 
 import { BarChart } from 'echarts/charts'
 import { use } from 'echarts/core'
@@ -156,7 +156,7 @@ function formatTooltip(params: unknown) {
 </script>
 
 <template>
-  <BaseCard
+  <ZCard
     as="article"
     title="请求健康"
     :description="`按${granularityText}区分服务结果、取消、未完成与调用方错误`"
@@ -185,9 +185,9 @@ function formatTooltip(params: unknown) {
           </div>
         </div>
         <BaseChart v-if="hasData" :option="chartOption" :height="210" />
-        <BaseEmpty
+        <ZEmpty
           v-else
-          size="sm"
+          size="small"
           surface="none"
           :title="loading ? '正在加载请求健康数据' : '暂无请求健康数据'"
           description="当前范围没有可绘制的请求记录"
@@ -195,5 +195,5 @@ function formatTooltip(params: unknown) {
         />
       </div>
     </template>
-  </BaseCard>
+  </ZCard>
 </template>
diff --git a/frontend/src/views/usage/components/UsagePerformanceCard.vue b/frontend/src/views/usage/components/UsagePerformanceCard.vue
index 8815bb508..047d29360 100644
--- a/frontend/src/views/usage/components/UsagePerformanceCard.vue
+++ b/frontend/src/views/usage/components/UsagePerformanceCard.vue
@@ -2,7 +2,7 @@
 import type { EChartsOption } from 'echarts'
 import type { getUsageRecordInsightsOverview } from '@/api'
 
-import { BaseCard, BaseEmpty, BaseSegmented } from '@codex-proxy/ui'
+import { ZCard, ZEmpty, ZSegmented } from '@codex-proxy/ui'
 import { computed, shallowRef } from 'vue'
 import BaseChart from '@/components/charts/BaseChart.vue'
 import { requestActivityByBucket, zeroInactiveValues } from '@/components/charts/timeSeriesGap'
@@ -235,14 +235,14 @@ function formatThroughput(value: number | null) {
 </script>
 
 <template>
-  <BaseCard
+  <ZCard
     as="article"
     title="响应速度"
     description="延迟、速率与调度分位"
     class="min-h-90 xl:h-full"
   >
     <template #actions>
-      <BaseSegmented v-model="activeView" label="性能指标" :options="viewOptions" :disabled="loading" class="w-68" />
+      <ZSegmented v-model="activeView" aria-label="性能指标" :options="viewOptions" :disabled="loading" class="w-68" />
     </template>
 
     <template #body>
@@ -256,9 +256,9 @@ function formatThroughput(value: number | null) {
           </div>
         </div>
         <BaseChart v-if="hasData" :option="chartOption" :height="210" />
-        <BaseEmpty
+        <ZEmpty
           v-else
-          size="sm"
+          size="small"
           surface="none"
           :title="loading ? '正在加载性能数据' : '暂无性能数据'"
           :description="
@@ -274,5 +274,5 @@ function formatThroughput(value: number | null) {
         />
       </div>
     </template>
-  </BaseCard>
+  </ZCard>
 </template>
diff --git a/frontend/src/views/usage/components/UsageRecordDetailModal.vue b/frontend/src/views/usage/components/UsageRecordDetailModal.vue
index bd3036a0f..e532040bb 100644
--- a/frontend/src/views/usage/components/UsageRecordDetailModal.vue
+++ b/frontend/src/views/usage/components/UsageRecordDetailModal.vue
@@ -2,7 +2,7 @@
 import type { EChartsOption } from 'echarts'
 import type { UsageRecordDetail } from '@/api'
 
-import { BaseButton, BaseModal, BaseTable, defineTableColumns } from '@codex-proxy/ui'
+import { defineTableColumns, ZButton, ZDialog, ZTable } from '@codex-proxy/ui'
 import { computed } from 'vue'
 import BaseChart from '@/components/charts/BaseChart.vue'
 import { chartTooltipStyle } from '@/components/charts/tooltip'
@@ -275,12 +275,12 @@ const tokenDonutOption = computed<EChartsOption>(() => {
 </script>
 
 <template>
-  <BaseModal
+  <ZDialog
     v-model="open"
     title="使用记录详情"
     description="单次请求的完整链路信息"
-    tone="info"
-    size="xl"
+    type="info"
+    width="64rem"
   >
     <div v-if="record" class="grid min-w-0 gap-3">
       <section :class="panelClass">
@@ -420,11 +420,11 @@ const tokenDonutOption = computed<EChartsOption>(() => {
         <h3 :class="panelTitleClass">
           尝试链路
         </h3>
-        <BaseTable
+        <ZTable
           class="attempt-table mt-2.5 h-auto! min-w-0 font-mono tabular-nums"
           :columns="attemptColumns"
-          :rows="attemptRows"
-          density="compact"
+          :data="attemptRows"
+          size="small"
           row-key="id"
         >
           <template #outcome="{ row }">
@@ -450,7 +450,7 @@ const tokenDonutOption = computed<EChartsOption>(() => {
               {{ formatDuration(row.latencyMs) }}
             </span>
           </template>
-        </BaseTable>
+        </ZTable>
       </section>
 
       <section
@@ -478,11 +478,11 @@ const tokenDonutOption = computed<EChartsOption>(() => {
     <RequestDiagnosticsPanel v-if="record" :request-id="record.requestId" :active="open" />
 
     <template #footer>
-      <BaseButton variant="primary" @click="open = false">
+      <ZButton type="primary" @click="open = false">
         关闭
-      </BaseButton>
+      </ZButton>
     </template>
-  </BaseModal>
+  </ZDialog>
 </template>
 
 <style scoped>
diff --git a/frontend/src/views/usage/components/UsageSummaryCards.vue b/frontend/src/views/usage/components/UsageSummaryCards.vue
index c42cfbb28..b0f0a9308 100644
--- a/frontend/src/views/usage/components/UsageSummaryCards.vue
+++ b/frontend/src/views/usage/components/UsageSummaryCards.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { getUsageRecordSummary } from '@/api'
-import { BaseCard, BaseMotionIcon } from '@codex-proxy/ui'
+import { ZCard, ZMotionIcon } from '@codex-proxy/ui'
 
 import { Activity, Database, FileText, Timer } from '@lucide/vue'
 import { computed } from 'vue'
@@ -51,16 +51,16 @@ const items = computed(() => [
 
 <template>
   <section class="mt-5 grid shrink-0 grid-cols-1 gap-3 md:grid-cols-2 xl:grid-cols-4" aria-label="使用概览">
-    <BaseCard
+    <ZCard
       v-for="item in items"
       :key="item.key"
       as="article"
       padding="compact"
       class="grid min-h-23 grid-cols-[36px_minmax(0,1fr)] items-stretch gap-3"
     >
-      <BaseMotionIcon class="inline-flex size-9 shrink-0 items-center justify-center rounded-cp" :class="item.tone">
+      <ZMotionIcon class="inline-flex size-9 shrink-0 items-center justify-center rounded-cp" :class="item.tone">
         <component :is="item.icon" class="size-4.5" />
-      </BaseMotionIcon>
+      </ZMotionIcon>
       <div class="flex min-w-0 flex-col justify-between py-0.5">
         <span class="block text-cp-sm leading-none font-bold text-cp-text-quaternary">
           {{ item.label }}
@@ -72,6 +72,6 @@ const items = computed(() => [
           {{ item.detail }}
         </span>
       </div>
-    </BaseCard>
+    </ZCard>
   </section>
 </template>
diff --git a/frontend/src/views/usage/index.vue b/frontend/src/views/usage/index.vue
index b7198d704..f33615c92 100644
--- a/frontend/src/views/usage/index.vue
+++ b/frontend/src/views/usage/index.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { BaseCard, BaseIconButton, BasePageHeader, BaseSegmented, BaseSelect, BaseTableColumnSettings, BaseTablePagination, useTableColumns } from '@codex-proxy/ui'
+import { useTableColumns, ZCard, ZIconButton, ZPageHeader, ZPagination, ZSegmented, ZSelect, ZTableColumnSettings } from '@codex-proxy/ui'
 
 import { Eye } from '@lucide/vue'
 import { computed, shallowRef, watch } from 'vue'
@@ -59,16 +59,16 @@ watch(timeRange, () => {
 
 <template>
   <div class="w-full">
-    <BasePageHeader title="使用统计" description="查看请求用量、性能趋势与调用错误记录">
+    <ZPageHeader title="使用统计" description="查看请求用量、性能趋势与调用错误记录">
       <template #actions>
-        <BaseSelect v-model="timeRange" :options="usageTimeRangeOptions" class="w-34" />
+        <ZSelect v-model="timeRange" :options="usageTimeRangeOptions" class="w-34" />
         <ProviderFilter
           v-model="providerQuery"
           :disabled="refreshingList"
           class="shrink-0"
         />
       </template>
-    </BasePageHeader>
+    </ZPageHeader>
 
     <UsageSummaryCards :summary="summary" />
     <UsageInsightsGrid
@@ -78,7 +78,7 @@ watch(timeRange, () => {
       :loading="analyticsLoading"
     />
 
-    <BaseCard
+    <ZCard
       class="mt-5 flex flex-col"
     >
       <template #header>
@@ -93,7 +93,7 @@ watch(timeRange, () => {
               成功请求与失败请求明细
             </p>
           </div>
-          <BaseSegmented v-model="recordView" label="请求明细类型" :options="recordViewOptions" class="w-52" />
+          <ZSegmented v-model="recordView" aria-label="请求明细类型" :options="recordViewOptions" class="w-52" />
         </div>
       </template>
 
@@ -109,7 +109,7 @@ watch(timeRange, () => {
             @refresh="refreshUsageRecords"
           >
             <template #actions>
-              <BaseTableColumnSettings
+              <ZTableColumnSettings
                 :options="columnOptions"
                 @change="setColumnVisible"
                 @reorder="setColumnOrder"
@@ -128,22 +128,21 @@ watch(timeRange, () => {
             >
               <template #actions="{ row }">
                 <div class="flex items-center justify-start">
-                  <BaseIconButton
-                    variant="ghost"
-                    size="sm"
-                    label="查看使用记录详情"
+                  <ZIconButton
+                    size="small"
+                    aria-label="查看使用记录详情"
                     @click="handleViewDetail(row)"
                   >
                     <Eye class="size-3.5" />
-                  </BaseIconButton>
+                  </ZIconButton>
                 </div>
               </template>
             </UsageRecordsTable>
-            <BaseTablePagination
-              :pagination="usagePagination"
-              :loading="loading"
-              @page-change="handlePageChange"
-              @page-size-change="handlePageSizeChange"
+            <ZPagination
+              v-bind="usagePagination"
+              :disabled="loading"
+              @current-change="handlePageChange"
+              @size-change="handlePageSizeChange"
             />
           </div>
         </div>
@@ -157,7 +156,7 @@ watch(timeRange, () => {
           />
         </div>
       </template>
-    </BaseCard>
+    </ZCard>
 
     <UsageRecordDetailModal v-model="showDetailModal" :record="selectedUsageRecord" />
   </div>
diff --git a/modules/plugins b/modules/plugins
index ff9ab2fe4..c52319121 160000
--- a/modules/plugins
+++ b/modules/plugins
@@ -1 +1 @@
-Subproject commit ff9ab2fe4ed4b4256269a2936bc616768c0e932e
+Subproject commit c52319121eec48542a3235e0df8b93d57bcb2561
diff --git a/modules/ui b/modules/ui
index 83c92024d..db615f3d7 160000
--- a/modules/ui
+++ b/modules/ui
@@ -1 +1 @@
-Subproject commit 83c92024dec82b5a644d6adca96a140c541684b0
+Subproject commit db615f3d72975e0d09847a07d03ed5fe7ba8c8b0